渲染多个子组件的最佳方法

Question

我刚开始学习ReactJS，并且很想知道渲染多个不同子组件的最佳实践。什么是正确的方法和最有效的方法？这是我当前的渲染功能;

render() {
    return (
        <div>
            <Display
                image={this.state.professional.image}
                username={this.state.professional.username}
            />
            <div className="container">
                <Navbar
                    brand_name={!!this.state.professional.brand_name}
                    username={!!this.state.professional.username}
                    description={!!this.state.professional.description}
                    menu={!!this.state.professional.menu}
                    reviews={!!this.state.reviews}
                    photos={!!this.state.professional.photos}
                    email={!!this.state.professional.email}
                    address={!!this.state.professional.service_addresses}
                />
                <section className="artist-page">
                    <div className="container">
                        <About
                            description={this.state.professional.description}
                            accolades={this.state.professional.accolades}
                            cancellation={this.state.professional.lead_time_cancellation}
                            rules={this.state.professional.service_rules}
                            faqs={this.state.professional.faqs}
                        />
                        {(this.state.professional.menu || this.state.professional.offers)
                            &&
                        <Services
                            services={this.state.professional.menu}
                            offers={this.state.offers}
                        />}
                        {!!this.state.photos && <Portfolio photos={this.state.photos} />}
                        {!!this.state.reviews && <Reviews reviews={this.state.reviews} score={this.state.professional.rating_overall_stats} count={this.state.professional.review_count} />}
                        {(!!this.state.professional.email || !!this.state.professional.address) && <Contact
                            address={this.state.professional.service_addresses[0]}
                            name={!!this.state.professional.brand_name ? this.state.professional.brand_name : this.state.professional.username}
                        />}
                    </div>
                </section>
            </div>
        </div>

    );
}

Answer 1

想一想state需要什么，props应该是什么。

您在此处粘贴的这个父组件似乎是将所有子项的信息存储为状态，然后将其作为道具传递给子项。

您确定此家长需要了解username的{​​{1}}，description，menu等内容吗？如果没有，则将它们保存为Navbar自己的状态。

您可以将整个<Navbar>对象作为道具传递。

this.state.professional

然后在About组件中，您可以拆开对象并相应地使用它：

<About professional = {this.state.professional}/>

您可以考虑解构为可读性

<p>{ this.props.professional.description }</p>

修复您的＆lt; Navbar＆gt;

就我个人传递const {description, rules} = this.state.professional return ( <About description={description} rules={rules}/> ) 时，我个人认为这看起来很奇怪且难以理解。你可以考虑这个：

boolean

然后在Navbar组件内部进行布尔评估，这里有几个例子：

<Navbar reviews={this.state.reviews} {...this.state.professional} />