Question

我非常新的反应并试图绕过传递状态到子组件。简而言之，我有一个包装器组件，它包含一个显示表的子组件。一旦我将数据存储在一个数组中，我将它传递给后来显示的子项。

在父母中我传递一个这样的数组：

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

然后可以使用

访问它

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

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

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

我如何一次性通过这三个人？创建和数组这些数组，如果是这样，我将如何访问它们。 this.props.data [0]

Answer 1

您完全可以将多个道具传递给组件！

<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]来分别访问每个阵列，而是从一个道具。

Answer 2

这种方法通常意味着你向<CustomComponent>传递了太多东西，这导致了一个不太可重用的大型组件。

根据您的用例，您可能希望创建“子组件”，将每个阵列呈现为一个表：

<CustomContainer>
  <CustomTable data={this.state.arrayOne} />
  <CustomTable data={this.state.arrayTwo} />
  <CustomTable data={this.state.arrayThree} />
</CustomContainer>

Answer 3

有很多方法可以完成你的要求。我个人会把它作为一个对象文字传递给你。

//destructure the elements you want to pass
const { arrayOne, arrayTwo, arrayThree } = this.state;

//pass the data prop as an object literal using property shorthand syntax
<CustomComponent data={{ arrayOne, arrayTwo, arrayThree }}/>

要访问它，请使用

this.props.data.arrayOne.map(single => single);
this.props.data.arrayTwo.map(single => single);
this.props.data.arrayThree.map(single => single);

React：在传递多个状态时遇到一些麻烦。

3 个答案: