React の親コンポーネントと子コンポーネント間の値の転送の問題の分析

この記事では、主に反応する親コンポーネントと子コンポーネント間の値の転送の問題の分析を紹介します。これには、必要な友達が参照できるように共有します。

親コンポーネントは子コンポーネントに渡されます。中心となるアイデアは、親コンポーネントの状態を子コンポーネントに渡すことです

父组件代码：
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></children>
          })}
      )
  }
}
export default Father;
子组件代码：
class Children extends React.Component {
    render(){
        // 这里的data就是父组件传递过来的值
        var data = this.props.data;
        return(
            <col>
                <formgroup>
                  <label>
                    // 这里就可以通过将data中的值渲染到子组件中
                    <input>
                    <em></em>{data.value}
                  </label>
                </formgroup>
            
        )
    }
}

上記は、親コンポーネントが子コンポーネントに値を渡すことです

現在のプロジェクト開発プロセスでは、ほとんどの子コンポーネントは次のようなデータ操作を必要とします。 input 入力、チェックボックスの選択、選択解除など。この場合、サブコンポーネントのデータを親コンポーネントに返す必要があります。redux を使用すると、ストアを通じてデータを一元的に管理および分散できます。反応単独でも実現できます

サブコンポーネント 親コンポーネントに値を渡す:

一般的な考え方は、親コンポーネントと子コンポーネントが親コンポーネントの状態を共同で管理するというものです。子コンポーネントを呼び出し、子コンポーネントは onChange を通じて親コンポーネントの状態にデータを返します

父组件代码：
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  {$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>
                <formgroup>
                  <label>
                    // 这里就可以通过将data中的值渲染到子组件中
                    <input> {this.ChildrenChange(event,"end",data.key)}} type="text" value={data.value}/>
                    <em></em>{data.value}
                  </label>
                </formgroup>
            
        )
    }
}

以上です。親コンポーネントに値を渡す子コンポーネントの実装メソッド (データの送信など) を実行できます。例:

父组件中提交数据：
addData(){
    // 获取state
    let menu = this.state.menu;
    // 遍历state   将我们要的数据取出来
    var newArray = [];
    for(let i = 0; i <p> 以上がこの記事の全内容です。その他の関連コンテンツについては、PHP に注目してください。中国語のサイトです！ <br></p>関連する推奨事項: <p></p><p>Vue+Mock.js でフロントエンド独立開発環境を構築する方法</p><p class="comments-box-content"><a title="Vue+Mock.js如何搭建前端独立开发环境" href="http://www.php.cn/js-tutorial-406399.html" target="_blank"></a><br>vue ベースのダイアログ プラグイン、art-dialog-vue2.0 のリリース内容。 js</p><p class="mt20 ad-detail-mm hidden-xs"><a title="基于vue.js的dialog插件art-dialog-vue2.0的发布内容" href="http://www.php.cn/js-tutorial-406393.html" target="_blank"></a></p>

以上がReact の親コンポーネントと子コンポーネント間の値の転送の問題の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。