Analyse von Wertübertragungsproblemen zwischen reagierenden übergeordneten und untergeordneten Komponenten

Dieser Artikel stellt hauptsächlich die Analyse von Wertübertragungsproblemen zwischen reagierenden übergeordneten und untergeordneten Komponenten vor. Jetzt kann ich ihn mit allen teilen, die ihn benötigen.

Übergeordnete Komponentenübergänge untergeordnete Komponente:
Die Kernidee besteht darin, den Status in der übergeordneten Komponente an die untergeordnete Komponente zu übergeben

父组件代码：
class Father extends React.Component {
  constructor(props){
    super(props);
    // 父组件的state
    this.state = {
      menu:[]
    }
  }
  componentDidMount() {
      // 这里可以发ajax请求  去后端请求数据   通过setState将值保存到自己的state中
      // 假定data为后端请求回来的数据
      var data = [];
      this.setState({
          menu: data
      })
  }
  render() {
      return (
          {this.state.menu.map(function (data) {
            return <Children data={data} key={data.key}/>
          })}
      )
  }
}
export default Father;
子组件代码：
class Children extends React.Component {
    render(){
        // 这里的data就是父组件传递过来的值
        var data = this.props.data;
        return(
            <Col md={ 3 }>
                <FormGroup className="p-b">
                  <label className="input">
                    // 这里就可以通过将data中的值渲染到子组件中
                    <input id={data.key} type="text" value={data.value}/>
                    <em className="fa fa-check"></em>{data.value}
                  </label>
                </FormGroup>
            </Col>
        )
    }
}

Das Obige ist der Wert, der von der übergeordneten Komponente an die untergeordnete Komponente übergeben wird

In Im aktuellen Projektentwicklungsprozess benötigen die meisten Unterkomponenten einige Datenoperationen, z. B. Eingabe, Auswahl und Abwahl von Kontrollkästchen usw. In diesem Fall müssen die Daten der Unterkomponente an die übergeordnete Komponente zurückgegeben werden. Dies kann über den Store erfolgen. Eine einheitliche Verwaltung der Verteilungsdaten kann auch allein durch Reagieren erreicht werden.

Unterkomponenten geben Werte an übergeordnete Komponenten weiter:
Die allgemeine Idee ist, dass übergeordnete Komponenten und Unterkomponenten Verwalten Sie den Status in der übergeordneten Komponente einheitlich, und die übergeordnete Komponente übergibt den Status an die untergeordnete Komponente. Die untergeordnete Komponente gibt die Daten über onChange an den Status der übergeordneten Komponente zurück Der Wert wird an die übergeordnete Komponente übergeben. Weitere Vorgänge (z. B. das Senden von Daten) in der übergeordneten Komponente reichen aus.

Zum Beispiel:

父组件代码：
class Father extends React.Component {
  constructor(props){
    super(props);
    // 父组件的state
    this.state = {
      menu:[]
    }
  }
  componentDidMount() {
      // 这里可以发ajax请求  去后端请求数据   通过setState将值保存到自己的state中
      // 假定data为后端请求回来的数据
      var data = [];
      this.setState({
          menu: data
      })
  }
  // 子组件触发   参数就是子组件回传回来的一些数据
  ChildrenFunc(data,value,key){
    // 拿到当前组件的state
    let menu = this.state.menu;
    // 遍历当前state，遍历过程中可以对state中的值进行修改
    for(let i = 0; i < menu.length; i++){
      if(key == menu[i].key){
        menu[i].value = data;
      }
    };
    // 将修改之后的值保存到当前组件的state中
    this.setState({
      menu: menu
    });
  }
  render() {
      return (
          {this.state.menu.map(function (data) {
            // onUpdata方法就是子组件状态改变时就会调用这个函数，通过这个函数子组件就会触发父组件的ChildrenFunc方法，从而达到修改state的功能
            return <Children data={data} key={data.key} onUpdata={(data,value,position) => {$this.ChildrenFunc(data,value,position)}}/>
          })}
      )
  }
}
export default Father;

子组件代码：
class Children extends React.Component {
    // 子组件状态改变就会触发父组件传递过来的onUpdata方法，可以进行一系列的传值，比如将输入值传递回去等
    ChildrenChange(event,value,position){
        this.props.onUpdata(event.target.value,value,position);
    }
    render(){
        // 这里的data就是父组件传递过来的值
        var data = this.props.data;
        return(
            <Col md={ 3 }>
                <FormGroup className="p-b">
                  <label className="input">
                    // 这里就可以通过将data中的值渲染到子组件中
                    <input id={data.key} onChange={(event) => {this.ChildrenChange(event,"end",data.key)}} type="text" value={data.value}/>
                    <em className="fa fa-check"></em>{data.value}
                  </label>
                </FormGroup>
            </Col>
        )
    }
}

Das Obige ist der gesamte Inhalt von Ich hoffe, dass er für das Lernen aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

So erstellen Sie eine Front-End-unabhängige Entwicklungsumgebung mit Vue+Mock.js

Dialog basierend auf vue.js Release-Inhalt des Plug-ins art-dialog-vue2.0

Das obige ist der detaillierte Inhalt vonAnalyse von Wertübertragungsproblemen zwischen reagierenden übergeordneten und untergeordneten Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!