React 컴포넌트 통신 소개(코드 예시)

이 글은 React 컴포넌트 통신(코드 예제)에 대한 소개를 담고 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

최근에는 React 프레임워크를 자유롭게 자율 학습했습니다. 자율 학습 과정에서 겪은 모든 문제와 경험이 여기에 기록되어 React 프레임워크를 배우는 학생들에게 도움이 되기를 바랍니다. 코드에 대해.
먼저 아버지에서 아들로 전달:

import React, { Component } from 'react';
import Com1 from './componments/com1'

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      arr: [{
          "userName": "fangMing", "text": "123333", "result": true
      }, {
          "userName": "zhangSan", "text": "345555", "result": false
      }, {
          "userName": "liSi", "text": "567777", "result": true
      }, {
          "userName": "wangWu", "text": "789999", "result": true
      },]
    };
    this.foo = "我来自父组件"  //这个也是父传子方法，可能初学者有点迷，刚开始我也用来和arr = {this.state.arr}做区分
  };
  render() {
    return (
      <div>
        <header>
          <img  alt="React 컴포넌트 통신 소개(코드 예시)" >                    
        </header>
        <com1></com1>
      </div>
    );
  }
}
export default App;

하위 구성 요소:

import React, { Component } from 'react';

class Ele extends Component{
    constructor(props){
       super(props)  
    };
    render(){
        return (
           <div>
               <h1>Hello, {this.props.age}</h1>
               <p>{this.props.fn}</p>
               <ul>
                    {
                        this.props.arr.map(item => { //这个地方通过this.props.arr接收到父组件传过来的arr，然后在{}里面进行js的循环
                            return (
                                <li>
                                    {item.userName} 评论是:{item.text}
                                </li>
                            )
                        })
                    }
                </ul>
           </div>
        );
    };
}

export default Ele;

결과는 다음과 같습니다.

위는 아버지에서 아들로 전달하는 방법입니다. 주요 방법은 props를 사용하여 값을 전달하는 것입니다. .son에서 father로 전달하는 방법을 살펴보겠습니다.

Son 부모 전달:
우선 자식 컴포넌트:

import React, { Component } from 'react';

class Ele extends Component{
    constructor(props){
       super(props);
       this.state = ({
            childText: "我来自子组件"
       })  
    };
    clickFun(text) {  //定义触发的方法
        this.props.pfn(text)//这个地方把值传递给了props的事件当中
    }
    render(){
        return (
           <div>               
                {/* 通过事件进行传值，如果想得到event，可以在参数最后加一个event，
                这个地方还是要强调，this，this，this */}
                <button>
                    传值
                </button>
           </div>
        );
    };
}

export default Ele;

부모 컴포넌트:

import React, { Component } from 'react';
import Com1 from './componments/com1'

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      parentText: "现在是父组件",     
  };
  fn(data) {
    this.setState({
        parentText: data //把父组件中的parentText替换为子组件传递的值
    },() =>{
       console.log(this.state.parentText);//setState是异步操作，但是我们可以在它的回调函数里面进行操作
    });
  };
  render() {
    return (
      <div>
        <com1></com1> {/*通过绑定事件进行值的运算，这个地方一定要记得.bind(this)，不然会报错，切记切记，因为通过事件传递的时候this的指向已经改变 */}
        <p>text is {this.state.parentText}</p>
      </div>
    );
  }
}
export default App;

위는 부모 컴포넌트 사이에 값을 전달하는 방법입니다. 부모, 자식 컴포넌트에 틀린 부분이 있으면 수정해주세요
아직 배우지 않은 형제 컴포넌트에 전달되는 값도 있습니다. 배우면서 업데이트하겠습니다

추천: React 비디오 튜토리얼】

위 내용은 React 컴포넌트 통신 소개(코드 예시)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!