Question

我正在尝试编写ReactJS组件，该组件将显示由状态中的已加载标志切换的2种视图类型。我问一个加载器微调器，但认为这个问题可能更复杂，显示基于该标志的2个不同的DOM树。我真的想让我的代码尽可能清晰。

我想到的是两种写作方式：

第一种方式对我来说非常直观但不可读+我必须在else语句中添加另一个包装div：

render() {
    return (
        <div>
            {!this.state.loaded ? <Loader /> : (
                <div>
                    <Arrow direction="left" onClick={this.slideLeft}/>
                    <ul>
                        {
                            this.props.images.map((image, index) => {
                                return (
                                    <li key={index} styleName={index === this.state.active ? 'active' : ''}>
                                        <ImageItem src={image} />
                                    </li>
                                )
                            })
                        }
                    </ul>
                    <Arrow direction="right" onClick={this.slideRight}/>
                </div>
            )}
        </div>
    );
}

第二种方法是在渲染任何加载的代码之前返回，将渲染函数中的逻辑保留在这样的情况下是一个好习惯吗？ +“content”类div重复：

render() {
    if(!this.state.loaded){
        return <div className="content"><Loader /></div>;
    }

    return (
        <div className="content">
            <Arrow direction="left" onClick={this.slideLeft}/>
            <ul>
                {
                    this.props.images.map((image, index) => {
                        return (
                            <li key={index} styleName={index === this.state.active ? 'active' : ''}>
                                <ImageItem src={image} />
                            </li>
                        )
                    })
                }
            </ul>
            <Arrow direction="right" onClick={this.slideRight}/>
        </div>
    );
}

也许你对我有其他建议？感谢。

Answer 1

据我所知，这是一种常见做法。但是，您应该以某种方式重构组件，即渲染函数中只有一个或没有逻辑。

您的父组件会观察加载状态并呈现加载程序组件或加载＆＃34;成分

如果您的状态逻辑变得更先进，那么您应该看一下Flux架构及其实现库Redux。

在等待在ReactJS渲染中获取数据时显示加载微调器

1 个答案: