Question

我有以下React组件

const VideoElement = React.createClass({

    render() {
        return (
            <video autoPlay loop muted className="video">
                <source src={this.props.source} type="video/mp4" />
            </video>
        )
    }
});

我希望这个输出只有window.innerWidth <= 640。

我的方法是添加一个初始状态，如：

getInitialState() {
     return { isMobile: window.innerWidth <= 640 }
}

并在render（）方法中添加一个条件，但如果我正在尝试访问this.state.isMobile，则会出现错误：

窗口未定义

有人能解释我的错误吗？

这是我的方法好吗？

Answer 1

在对React组件进行服务器端呈现时，您需要在life cycle method window内进行componentDidMount检查，该检查仅在客户端上调用一次。< / p>

在服务器端检查isMobile之类的内容时，您应该尝试访问请求来自哪个代理字符串，并将该信息传递给您的客户端。依靠窗口宽度来隐藏/显示内容应该用CSS来完成。

Answer 2

有更好的方法可以做到这一点，但如果是这样的话，我会做这样的事情：

class Hello extends React.Component {

    constructor(props) {
        super(props);
        this.mobile = false;
    }

    componentWillMount(){
        this.mobile = window.innerWidth <= 640
    }

    render() {
        if (this.mobile){
            return (
                <div>Hello Mobile</div>
            );
        }
        else {
            return (
                <div>Hello Desktop</div>
            );
        }
    }
};

ReactDOM.render(
  <Hello/>,
  document.getElementById('app')
);

Answer 3

您可以使用三元运算符

return true ? ():()

例如：

render() {
    return this.mobile ? (
    <di> loading </div>
    ):(
    <di> content custom </div>
    )

React.js中的条件加载

3 个答案: