javascript - react : Having some trouble passing multiple pieces of state.

Question

我是一个相当新的 react 者，并试图将我的注意力集中在将状态传递给子组件上。简而言之，我有一个包装器组件，其中包含一个显示表格的子组件。将数据存储在数组中后，我将其传递给子级，然后显示。

在父级中，我传递一个像这样的数组:

 <CustomComponent data={this.state.arrayOne}/>

然后可以使用

访问它

 this.props.data.map((x,index) => .... etc

问题是我需要将多个数组传递给 child 。所以如果我的状态对象看起来像:

this.state = {
  arrayOne: [],
  arrayTwo: [],
  arrayThree: [],
}

我怎样才能同时通过这三个？创建这些数组的数组，然后如果是的话我将如何访问它们。 this.props.data[0]?

Answer 1

您完全能够将多个 props 传递到一个组件中!

<CustomComponent array1={this.state.arrayOne} array2={this.state.arrayTwo}/>

为了代码的简洁性，我会让它变得更加简单和易于阅读:

render() {
  const { arrayOne, arrayTwo, arrayThree } = this.state;
  return (
    <CustomComponent
      arrayOne={arrayOne}
      arrayTwo={arrayOne}
      arrayThree={arrayThree}
    />
  );
};

<小时/>

如果你真的想要这一切，就像this.props.data一样然后这样传递: <CustomComponent data={ [...this.state.arrayOne, ...this.state.arrayTwo, ...this.state.arrayThree] } />对于所有元素在一起的一个大数组。

或

<CustomComponent data={ [this.state.arrayOne, this.state.arrayTwo, this.state.arrayThree] } />如果您想调用this.props.data[i]从一个 prop 单独访问每个数组。