Реагирование на стороне сервера рендеринга - addEventListener - PullRequest
Новая
       10

Реагирование на стороне сервера рендеринга - addEventListener

0 голосов
/ 05 октября 2018

У меня есть приложение реакции рендеринга на стороне сервера (потому что мне также нужен Facebook Seo).

Часть моего приложения должна получить window.innerWidth.

Я долго искал, большинство из них говорит, что вы не можете найти окно на стороне сервера, поэтому вам необходимо выполнить рендеринг на стороне клиента .

Я не уверен, как все работает, у меня есть componentdidmount, но у меня windowWidth навсегда 0.

После рендеринга сервера, наш bundle.js включится, и окно на стороне клиента будет работать правильно?Почему это все еще 0? 

state = {
      windowWidth: 0
}
    handleResize(){
        this.setState({windowWidth: window.innerWidth});
    }

    componentDidMount () {
        window.addEventListener('resize', this.handleResize);
     }

    componentWillUnmount () {
     window.removeEventListener('resize', this.handleResize);

    }

render() {
return (<div>{this.state.windowWidth}</div>)
}

1 Ответ

0 голосов
/ 05 октября 2018

Проблема в том, что вы прикрепляете функцию для установки новой ширины к слушателю «изменения размера», что означает, что только при изменении размера экрана новая ширина будет добавлена ​​в состояние.Вам нужно установить ширину внутри componentDidMount, и тогда вы получите ширину прямо при монтировании.

песочница

КОД: 

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      windowWidth: 0
    };
  }

  handleResize = () => {
    this.setState({ windowWidth: window.innerWidth });
  };

  componentDidMount() {
    this.setState({ windowWidth: window.innerWidth });
    window.addEventListener("resize", this.handleResize);
  }

  componentWillUnmount() {
    window.removeEventListener("resize", this.handleResize);
  }

  render() {
    return (
      <div>{this.state.windowWidth && <p>{this.state.windowWidth}</p>}</div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
...