代码之家 › 专栏 › 技术社区 › Luke

react从嵌套元素中的另一个组件更新组件

reactjs

Luke · 技术社区 · 7 年前

如何从React JS中的另一个组件更新组件?

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

我有3个反应班: 包含我的两个React组件的主类:

`反应组分A

反应组分B

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

更新1/2

我试着按照你的建议执行步骤,但我有这个问题:

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

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

我试着把它注入到我的组件中:

<MainGrid onArticleChanged={this.handleArticleUpdate} />

但我收到错误:

类型错误:无法读取未定义的属性“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

我认为我的问题是我的组件太嵌套了(它在组件选项卡面板中),并且handleArticleUpdate在作用域中不可见。

我只试着放

 <MainGrid onArticleChanged={this.handleArticleUpdate} />

在render()函数中,一切都运行得很好。

2 回复 | 直到 7 年前

Keir Lewis 7 年前

上升状态

从 React docs

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

在这种情况下,可以将状态从组件B移到主组件。这将通过属性传递给组件A和B,以便它们都反映状态的变化。如果状态需要例如,要由组件B从onclick事件进行更新,可以通过将回调从main传递到组件B来完成,如Luke所示。

Arup Rakshit 7 年前

您需要在主组件内部设置方法,并将它们传递给您。

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

然后在B区打电话给handlechangeona。当然,您还需要管理一个状态并传递它们。这个过程叫做提升状态