对于您来说,这对React Monsters来说应该是一件容易的事。:)我已经写了条件,但是我不知道如何在构造函数中处理视口大小以使条件起作用。简单明了,我想在视口大小为1451px或更宽时显示一个元素,而在1450px或更小时显示另一个元素。
这是我的代码(简体)
class My Class extends React.Component { constructor(props) { super(props); this.state = { isDesktop: "1450px" //This is where I am having problems }; } render() { const isDesktop = this.state.isDesktop; return ( <div> {isDesktop ? ( <div>I show on 1451px or higher</div> ) : ( <div>I show on 1450px or lower</div> )} </div> ); } }
也许我应该将其与ComponentWillMount或ComponentDidMount一起使用。老实说,不确定。我是React的新手。
在此先感谢大家。
也许我应该将其与ComponentWillMount或ComponentDidMount一起使用
是的,您需要侦听resize事件并在更改时更新内部状态。您可以通过在组件安装时添加事件处理程序来实现。在这里尝试完整的示例。
resize
class App extends React.Component { constructor(props) { super(props); this.state = { isDesktop: false //This is where I am having problems }; this.updatePredicate = this.updatePredicate.bind(this); } componentDidMount() { this.updatePredicate(); window.addEventListener("resize", this.updatePredicate); } componentWillUnmount() { window.removeEventListener("resize", this.updatePredicate); } updatePredicate() { this.setState({ isDesktop: window.innerWidth > 1450 }); } render() { const isDesktop = this.state.isDesktop; return ( <div> {isDesktop ? ( <div>I show on 1451px or higher</div> ) : ( <div>I show on 1450px or lower</div> )} </div> ); } }