Question

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

我读了很多文章，但找不到我的案子。

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

`反应成分A

反应组分B

`

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

更新1/2

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

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

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

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

<MainGrid onArticleChanged={this.handleArticleUpdate} />

但是我收到错误：

TypeError：无法读取未定义的属性'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

您需要在主要组件内部设置方法，并将其传递给下一个。

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

然后在B内部，只需调用handleChangeOnA。当然，您还需要管理一个状态并将其传递给其他人。这个过程称为提升状态

Answer 2

提升状态

从React docs

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

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

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

2 个答案:

提升状态