javascript - 在 ReactJs 中，如何将一个组件的状态传递或检索到另一个组件，以便两个组件都是第三个组件的一部分来划分操作

Question

我身边有 3 个 React 组件，

我有一个组件详细信息，它决定要检索的其他两个组件中的哪一个摘要和文档，如下所示:

import Summary from './Summary'
import Documents from './Documents'

class Details extends Component {
  constructor(props) {
    super(props)

    this.state = {
      summary: true,
      documents: false
    }
  }
render() {
    return (
 <Summary {...this.state} />
 <Documents {...this.state} />
)}

}
export default Details

Summary组件通过数据库对状态进行一些操作，并设置一些状态如下:

class Summary extends Component {
  constructor(props) {
    super(props)

    this.state = {
       summaryData: {
        mydata: {
          dataNo: '',
          subTotal: '',
          gst: '',
          gstAmount: '',
          totalAmount: '',
        }        
      },
      agreementDocs: []
    }
   }

componentDidMount() {

    let thisComponent = this
    Axios({
      method: 'get',
       url: http://xyszz/somedata,
      data: {},
      headers: { 'Content-Type': 'application/json' }
    })
      .then(function(response) {
        thisComponent.setState({
          summaryData: response.data.summaryData,
          agreementDocs: response.data.agreementDocs
        })
      })
      .catch(function(error) {

      })
  }
  }
export default Summary 

当前下面是文档组件的代码，我无法弄清楚如何获取摘要组件的更新状态:

class Documents extends Component {
  constructor(props) {
    super(props)
    console.log(props)
    this.state = {}
  }

  render() {
    return (
      <div className="container module-billing-attachments">
        <div className="row">
          <div className="col-sm-12">Attached documents here</div>
        </div>
      </div>
    )
  }
}

export default Documents

The third Documents component is the one in which I want the updated state in Summary Component

Answer 1

我相信这是可能为您引入 redux 的情况之一...您使用 redux 为所有组件保留全局状态，然后将组件与 redux 连接以访问全局状态。

但是让我们考虑一下，您不想使用 redux，而只想使用组件状态。

您可以通过在 Details 组件中保留一个处理函数并将其作为 props 传递给 summary 组件来实现这一点，并且每当 之后更新摘要的状态axios 调用您调用该处理程序....

然后，您使用 summary 中发生的更新来更新 details 组件的状态，最后将此更新后的状态传递给 document 组件

检查下面的代码:

详细信息组件

import Summary from './Summary'
import Documents from './Documents'

class Details extends Component {
  constructor(props) {
    super(props)

    this.state = {
      summary: true,
      documents: false,
      summary: {}
    }

    this.summaryChanged = this.summaryChanged.bind(this);
  }

  summaryChanged(updatedState){
    this.setState({
        summary:updatedState
    })

  }


render() {
    return (
 <Summary {...this.state}  handleChange={this.summaryChanged} />
 <Documents {...this.state}  summaryState={this.state.summary} />
)}

}
export default Details

摘要组件

class Summary extends Component {
  constructor(props) {
    super(props)

    this.state = {
       summaryData: {
        mydata: {
          dataNo: '',
          subTotal: '',
          gst: '',
          gstAmount: '',
          totalAmount: '',
        }        
      },
      agreementDocs: []
    }
   }

componentDidMount() {

    let thisComponent = this
    Axios({
      method: 'get',
       url: http://xyszz/somedata,
      data: {},
      headers: { 'Content-Type': 'application/json' }
    })
      .then(function(response) {
        thisComponent.setState({
          summaryData: response.data.summaryData,
          agreementDocs: response.data.agreementDocs
        } , ()=> {
            this.props.handleChange(this.state);
        })
      })
      .catch(function(error) {

      })
  }
  }
export default Summary 

最后是文档组件

class Documents extends Component {
  constructor(props) {
    super(props)
    console.log(props)
    this.state = {
        summaryState : {}
    }
  }

  componentWillMount(){
    this.setState({
        summaryState : this.props.summaryState
    })
    //now you have all the updated state of summary component as ```this.state.summaryState```
  }

  render() {
    return (
      <div className="container module-billing-attachments">
        <div className="row">
          <div className="col-sm-12">Attached documents here</div>
        </div>
      </div>
    )
  }
}

export default Documents