在孩子中调用一个函数有反应吗？

Question

我有一个包含多个应用程序Views。每个View都有一些映射的子级Entities。这些实体中的每一个都有一个状态，表示是否处于折叠/隐藏状态：this.state.show。每个Entity按钮都有一个切换show状态的按钮。一切正常。

我想做的是在上添加一个按钮，该按钮可以View同时显示或隐藏所有内容Entities。我以为这很简单，但是有几个复杂的因素：

我最终将Views在应用程序中拥有多个应用程序，每个应用程序以不同的方式显示相同的数据，因此将其存储show在提升的道具中并不是什么选择。我也不想在文件数据中存储UI状态，因为这使我误入歧途。

当状态直接存储Entity为状态而不是状态的支持时，它使我更容易理解发生了什么。View

React文档（以及在线上的每个人）都说您不应该基于更改的道具的状态，并且道具的数量Entities会经常变化。这就是为什么我不想将孩子的状态存储在父级中的原因，因为如果我这样做了并且实体发生了变化，那么我就必须以某种方式将道具的变化转换为状态的变化，强烈建议不要这样做。

如果我要使用事件，这些事件可能会从一个事件溢出View到另一个事件。

在这里追求正确的策略是什么？我是否没有足够的“反应能力”？

View.jsx

import React, { Component } from 'react'

import Entity from './Entity.jsx'

import Filter from './Filter.jsx'

class View extends Component {

    render() {

        return (

            <div className="view main">

                {this.props.entities ? this.props.entities.map(

                    (e, i) => (

                        <Entity

                            entity={e}

                            propertyTypes={this.props.propertyTypes}

                            key={i}

                            index={i}

                            taglists={this.props.taglists}

                            ee={this.props.ee}

                        />

                    )

                ) : ""}

            </div>

        )

    }

}

export default View

Answer 1

您的状态应仅在父组件中，而不能在任何子组件中。然后，您会将自己的功能和状态作为道具传递给孩子。