reactjs - React 从嵌套元素中的另一个组件更新组件

Question

如何在 React js 中更新另一个组件？

我读了很多帖子，但找不到我的案例。

我有 3 个 react 类: 包含我的两个 react 组件的主类:

` react 组件A

react 组分B

`

我想使用组件 B 更新组件 A 的状态。

更新 1/2

我正在尝试按照您建议的步骤操作，但我遇到了这个问题:

我在我的主类中定义了一个函数:

handleArticleUpdate(codice){
alert(codice);
//this.setState({codice_articolo: codice});
}

我正在尝试将其注入(inject)我的组件中:

<MainGrid onArticleChanged={this.handleArticleUpdate} />

但我收到错误:

类型错误:无法读取未定义的属性“handleArticleUpdate”

我也尝试绑定(bind) this 但错误是相同的..

我的代码:

      import React, { Component, PureComponent } from 'react';
    import { NavLink } from 'reactstrap';
    import ReactDOM from 'react-dom';

    import {Form, TabPanel} from 'devextreme-react';
    import MainGrid from './components/MainGrid';

    import VisualizzatoreArticoli from './components/VisualizzatoreArticoli';
    import './App.css';

    const headerStyle ={
      border:'1px solid'
    }

    const contentStyle ={
      border: '1px solid'
    }

    const bodyStyle ={
      backgroundColor: '#999999'

}
//import { Loading } from '../../../theme- 
 sources/bootstrap4/components/loading';
  //import { CurrencyTypeProvider } from '../../../theme- 
  sources/bootstrap4/components/currency-type-provider';

    const URL = 'http://localhost:53139/api/randomData';

    //const URL = 'https://js.devexpress.com/Demos/WidgetsGallery/data/orderItems';

    class App extends React.PureComponent {


     constructor(props) {
    super(props);
    this.state = {
      itemsHeader : [
        {
          title : 'a',

          badge: 'New'
        },
        {
          title : 'b',
          text : "1",
        },
        {
          title : 'c',
        },
      ],
      itemsContent : [
        {
          title : 'Righe',

          badge: 'New'
        },
        {
          title : 'b',
          text : "1",
        },
        {
          title : 'c',
        },
      ],
      codice_articolo :''
    }

this.handleArticleUpdate = this.handleArticleUpdate.bind(this);

  }


getInitialState(){
  return this.state.codice_articolo
}

handleArticleUpdate(codice){
  alert("");
//this.setState({codice_articolo: codice});
}



  render() {


    return (
<div style={bodyStyle}>

  <div style={headerStyle}>

        <TabPanel
          height = '300'
          items  = {this.state.itemsHeader}
          itemComponent = {function(itemData){

              switch(itemData.title){
                case "a":
                  return null
                break;
                case "b":
                return null
              break;
                case "c":
                return null
                break;


              }    
            } 
          }
          >

      </TabPanel>
  </div>
<br />
  <div  style={contentStyle}>
  <TabPanel
    height = '700'
    items  = {this.state.itemsContent}
    itemComponent = {function(itemData){

        switch(itemData.title){
          case "Righe":
            return <MainGrid onArticleChanged={this.handleArticleUpdate()} />
          break;
          case "b":
          return null
        break;
          case "c":
          return null
          break;


        }    
      } 
    }
    >

</TabPanel>
  </div>








  </div>


    );
      }
      }

     export default App;

更新 2/2

我认为我的问题是我的组件过于嵌套(它位于组件 TabPanel 内部)并且 handleArticleUpdate 在范围内不可见。

我尝试只放

 <MainGrid onArticleChanged={this.handleArticleUpdate} />

在 render() 函数中，一切都完美地工作。

Answer 1

提升状态

来自React docs

Often, several components need to reflect the same changing data. We recommend lifting the shared state up to their closest common ancestor. Let’s see how this works in action.

在这种情况下，可以将状态从组件 B 移动到 Main。这将通过 props 传递给组件 A 和 B，以便它们都反射(reflect)状态的变化。如果组件 B 需要更新状态(例如，通过 onClick 事件)，则可以通过将回调从 Main 传递到组件 B 来完成，如 Luke 所示。