Question

不确定我做错了什么但是我的组件包装在setTimeout中没有呈现给DOM：

const ContentMain = Component({
    getInitialState() {
        return {rendered: false};
    },
    componentDidMount() {
        this.setState({rendered: true});
    },
    render(){
        var company = this.props.company;

        return (

            <div id="ft-content">
                {this.state.rendered && setTimeout(() => <Content company={company}/>,3000)}
            </div>
        )
    }
})

Answer 1

我打赌这不起作用，因为render方法需要同时消耗所有输入，并且无法回顾其他组件，那里＆＃39;流向React的流量。我建议出于逻辑原因将暂停与render方法分开，并在componentDidMount这样做：

const ContentMain = Component({
    getInitialState() {
        return {rendered: false};
    },
    componentDidMount() {
        setTimeout(() => {
            this.setState({rendered: true});
        }, 3000);
    },
    render(){
        if (!this.state.rendered) {
            return null;
        }

        var company = this.props.company;

        return (
            <div id="ft-content">
                <Content company={company}/>
            </div>
        )
    }
})

更改状态会触发渲染方法。

另一方面 - 即使您的原始方法有效，每次初始加载后渲染时，您都会看到组件闪烁3秒钟。猜猜你不会想要：）

无法使组件在setTimeout中呈现

1 个答案: