React在嵌套元素中更新另一个组件

Question

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

我看过很多帖子，但我找不到自己的情况。

我有3个反应类：包含我的两个反应组件的主类：

`反应组件A.

React Component B

`

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

更新1/2

我正在尝试按照您的建议执行这些步骤，但我遇到了这个问题：

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

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

我正在尝试将其注入我的组件中：

<MainGrid onArticleChanged={this.handleArticleUpdate} />

但我收到错误：

TypeError：无法读取undefined的属性'handleArticleUpdate'

我试图绑定这个但错误是一样的..

我的代码：

      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

通常，有几个组件需要反映相同的变化数据。我们建议将共享状态提升到最近的共同祖先。让我们看看这是如何运作的。

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

Answer 2

您需要在主组件内设置方法，然后将其传递下去。

class mainClass extends React.Component {
  handleChangeOnA = () => {
     // ... LOGIC
  }
  render() {
      <ComponentA/>
      <ComponentB handleChangeOnA={this.handleChangeOnA}/>
  }
}

然后在B里面，只需调用handleChangeOnA。当然，您还需要管理状态并将其传递下去。此过程称为提升状态