Question

我希望通过单击父组件中的按钮并通过API从不同层次结构的多个子组件中收集数据来提交数据。

我与一位同事讨论了此案，他建议我在家长陪审团中采用一种方法。并将其（作为处理程序）分享给prop中的孩子，然后进一步传播给其孩子，保持child comp。作为无状态补偿。这样，当用户输入数据时，它将通过该处理程序方法存储到 state 变量中（在父对象中）。例如：

class Parent extends Component {
  constructor(props){
    this.state.data = {}
  }

  updateHndler(key, value){
    this.setState({
       data : {...this.setState.data, key: value}
    })
  }
}

const ChildA = props => {
  onComplete(e){
    this.props.updateHndler('text', e.target.value)
  }

  return (<div>
     ...
     ..
     <input .. onChange={()=>{onComplete(e)}}
  </div>)
}

当每个子组件在每个状态的父状态变量中设置值时，它会得到更新，并且其render（）方法会保持触发，考虑到每次更改时所有子组件的渲染成本，上述方法是均匀的够好了？

谢谢

在不使用Redux的情况下，React Application中的最佳方法是什么？

0 个答案: