如何在反应中跨不同的jsx文件修改访问和修改object

Question

我在 React 中有 2 个 child 组件和 1 个 parent 组件 .jsx 扩展

在 Child 1 中，我正在使用 setState

设置 object 数据

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

在Child 2 我想访问这个数据并修改

在我的 parent class 我有这样的代码

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

<div>

<child1>
<child2>

</div>

在两个不同的children之间访问任何object的过程是什么？

Answer 1

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

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 的数据，然后两个组件将同时更新，并且在一个地方管理状态。

Answer 2

使用 this.setState({data:{someobect}}) 您可以为您的组件设置本地状态。如果你想为两个 children 使用这个 object 你应该用 parent.

的道具设置它

如何在反应中跨不同的jsx文件修改访问和修改object

How to modify an access and modify object across different jsx files in react

reactjs

react-jsx