组件中传递的数据的单击事件顺序响应数组

Question

我是React的新手，请帮忙。我的主文件app.js中有一个按钮和一个组件

          <button id="myBtn">Click Me</button>

        <div className="myClass">
          <FooComponent fooData={data} />
        </div>

[我想要做的是，当我单击按钮以降序排序要渲染在组件中的数据数组时。我当时正在考虑在组件中传递另一个参数，例如标志，但是我不确定如何做到这一点

Answer 1

从您的问题来看，您想让子组件（FooComponent）知道该按钮已被单击，以便它可以处理（排序）它收到的数据。

[有很多方法。例如，您可以将布尔属性传递给子组件，该子组件是对其进行排序的标志。因此，父组件会跟踪单击按钮的时间，而子组件只会观察到此情况（也许在componentDidUpdate中）。

如果您使用的是功能组件，而不是基于类的组件，则可能会稍有改变，但这可以使您有所了解。

state = {
   requestSort: false
}   

requestSort = () => {
    this.setState({
        requestSort: true
    }
}

render() {
        return (
          <>
            <button id="myBtn" onClick={this.requestSort}>Click Me</button>

            <div className="myClass">
                <FooComponent requestSort={this.state.requestSort} fooData={data} />
            </div>
          </>
        )
}
或者，由于数据也被传递到子组件，因此单击parent

可以对其进行排序。这取决于您是否对数据执行其他任何操作（即，只有FooComponent是应该具有数据排序副本的一个）。

Answer 2

将状态中的数据传递给FooComponent，并编写一个对该状态中的数据进行排序的函数。一旦父组件中的状态更新，数据将立即在子组件中更新，因为一旦注意到父组件中的数据与先前接收的数据不匹配，子组件将重新呈现。下面是一个示例。