Question

我在React中有2个子组件和1个父组件.jsx扩展

在Child 1中，我使用setState

设置对象数据

this.setState({data:{someobect}})

在Child 2中，我想访问此数据并修改

在我的父类中，我有这样的代码

import Child1 from .src/child1.jsx
import Child2 from .src/child2.jsx

<div>

<child1>
<child2>

</div>

访问两个不同孩子之间的任何对象的过程是什么？

Answer 1

使用this.setState({data:{someobect}})您可以为组件设置本地状态。如果你想为这两个孩子使用这个对象，你应该使用来自父母的道具来设置它。

Answer 2

您需要将状态提升到父级并让子级委托给父组件以接收该信息。

import Child1 from .src/child1.jsx
import Child2 from .src/child2.jsx


class Parent Extends React.Component {
  constructor() {
    super()
    this.state = {
      data: {}
    }
  }


  _updateData = (newData) => {
    this.setState({
      data: newData
    })
  }

  render() {
    return (
      <div>
        <child1 data={this.state.data} updateData={this._updateData}>
        <child2 data={this.state.data} >  
      </div>  
    )
  }
}

并在您的child1组件中，您需要使用您想要更新的新数据对象更新名为this.props.updateData的数据，然后同时更新这两个组件并在一个位置管理状态。

如何修改反应

2 个答案: