Question

在我的组件之一中，我有this.props.errors和this.state.errors。在此组件中，存在任何一个。我想将它们合并以传递给子组件，如下所示。

<ChildComponent errors = { this.props.errors/this.state.errors } />

我该怎么做？

Answer 1

您可以使用内置的点差运算符：

<ChildComponent errors={{ ...this.props.errors, ...this.state.errors }} />

Answer 2

您可以使用对象spread运算符来合并键并创建新对象。

<ChildComponent errors = { {...this.props.errors, ...this.state.errors} } />

请注意，两个跨度的顺序很重要，在上面的示例中，状态对象的键将覆盖props对象中相同名称的键。

编辑：如果错误是字符串，则可以将它们连接起来或将它们作为数组传递。

<ChildComponent errors = { [this.props.errors, this.state.errors] } />
<ChildComponent errors = { this.props.errors + ' ' + this.state.errors } />

Answer 3

您必须使用价差运算符

enum.ToString()

Answer 4

我不建议其他使用扩展的解决方案，因为它们每次都扩展到一个新对象中，这将导致每次在PureComponent上重新渲染。

在render函数之外创建一个对象，例如作为类成员变量或状态属性，然后将错误填充到该对象中。

class Parent extends React.PureComponent {
   constructor(props){
      super(props)
      this.state = {
         allErrors: {
            ...yourStateErrors,
            ...this.props.errors
         }
      }

   }
   ...
   render() {
      <Child errors={this.state.allErrors} />
   }
}

记住不要在以后的任何更新中仅仅改变state.errors属性

在React中合并状态和道具

4 个答案: