반응 상위 구성요소와 하위 구성요소 간의 가치 전달 문제 분석

이 글은 주로 React 부모 컴포넌트와 자식 컴포넌트 사이의 가치 전달 문제를 소개합니다. 이제 특정 참조 값이 있으므로 필요한 친구는

parent 컴포넌트를 참조할 수 있습니다. 하위 구성 요소에 전달됨:
핵심 아이디어는 상위 구성 요소의 상태를 하위 구성 요소에 전달하는 것입니다

父组件代码：
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>
        )
    }
}

위는 상위 구성 요소에서 하위 구성 요소로 전달된 값입니다#🎜 🎜#

이제 프로젝트 개발 과정에서 대부분의 하위 구성 요소에는 입력 입력, 확인란 선택 및 선택 취소 등과 같은 일부 데이터 작업이 필요합니다. 이 경우 하위 구성 요소의 데이터를 전달해야 합니다. , redux를 사용하면 스토어를 통해 데이터를 균일하게 관리하고 배포할 수 있으며 이는 React 단독으로도 가능합니다

하위 구성 요소는 값을 상위 구성 요소에 전달합니다. 구성 요소:

전체 아이디어는 상위 구성 요소와 하위 구성 요소를 균일하게 관리하는 것입니다. 상위 구성 요소의 상태, 상위 구성 요소는 상태를 하위 구성 요소에 전달하고 하위 구성 요소는 데이터를 다시 상위 구성 요소에 전달합니다. 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 < 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>
        )
    }
}

위는 하위 구성 요소가 값을 상위 구성 요소에 전달하는 방법입니다. 상위 구성 요소의 추가 작업(예: 데이터 제출)은 자체 상태의 값을 통해 제출될 수 있습니다.

예:

父组件中提交数据：
addData(){
    // 获取state
    let menu = this.state.menu;
    // 遍历state   将我们要的数据取出来
    var newArray = [];
    for(let i = 0; i < menu.length; i++){
      if(menu[i].key == "某些我们需要的值"){
        newArray.push(menu[i].value);
      }
    };
    // 提交时的参数
    var data = {
        id: "xxxx",
        menu: newArray.join(",")
    }
    // 提交的ajax请求代码。。。。。
}

위는 이 기사의 전체 내용입니다. 모든 사람의 학습에 도움이 되기를 바랍니다. 도움이 필요한 경우 PHP 중국어 웹사이트에 관심을 기울여 더 많은 관련 내용을 확인하세요. !

관련 권장사항:

Vue+Mock.js 프런트엔드 독립 개발 환경 구축 방법

vue.js 기반 대화 플러그인 art-dialog-vue2.0의 출시 콘텐츠

위 내용은 반응 상위 구성요소와 하위 구성요소 간의 가치 전달 문제 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!