React 상위 구성 요소 및 하위 구성 요소의 데이터 전송 상세 정보

React 프레임워크 구성 요소 간의 데이터 전송 지식을 배우기 전에 우리는 먼저 몇 가지 사용 원칙을 명확하게 해야 한다.

React의 구성 요소 간 통신은 단방향입니다.데이터는 반드시 상위 계층에서 하위 계층으로 전송되거나 하위 계층에서 상위 계층으로 전달되어야 합니다.

형제급 구성 요소에 데이터를 전달하려면 공공의 부급에 먼저 전달한 다음에 전달할 구성 요소의 위치에 전달해야 한다.

이런 비부자 관계의 구성 요소 간의 데이터 전달은 이런 층층이 전달하는 방식을 추천하지 않는다.대신 유지 보수 글로벌 상태 기능 모듈(Redux)

을 사용합니다.

1. 상위 어셈블리가 하위 어셈블리에 데이터 전달

부모 구성 요소가 하위 구성 요소에 데이터를 전달하는 것은 부모 구성 요소에서 하위 구성 요소를 인용할 때 하위 구성 요소 탭에서 전송 데이터의 속성을 설정하는 것이다.서브어셈블리에서는this.props에서 전송된 데이터 받기;이렇게 하면 부모 구성 요소가 하위 구성 요소에 대한 데이터 전송을 실현할 수 있다.

1.1, 상위 구성 요소 코드

import React, { Component } from 'react';
import './App.css';
import Child from './child'
class App extends Component {
    constructor(props){
        super(props);
        this.state={
            msg:' ',
            name:'John',
            age:99
        }
    }
    callback=(msg,name,age)=>{
        // setState , msg , child 
        this.setState({msg});
        this.setState({name});
        this.setState({age});
    }
  render() {
    return (
      <div className="App">
        <p> Message: {this.state.msg}</p>
        <Child callback={this.callback} age={this.state.age} 
name={this.state.name}></Child>
      </div>
    );
  }
}
export default App;

코드 설명: 부모 구성 요소가 하위 구성 요소 (Child) 를 사용하는 과정에서 하위 구성 요소에 두 개의 속성 (age와name) 과 한 가지 방법 (callback은 고려하지 않음) 을 전송했습니다.
주요 코드:

<Child name={this.state.name} age={this.state.age}></Child>

1.2, 서브어셈블리 코드

import React from "react";
class Child extends React.Component{
    constructor(props){
        super(props);
        this.state={
            name:'Andy',
            age:31,
            msg:" "
        }
    }
    change=()=>{
        this.props.callback(this.state.msg,this.state.name,this.state.age);
    }
    render(){
        return(
            <div>
                <div>{this.props.name}</div>
                <div>{this.props.age}</div>
                <button onClick={this.change}> </button>
            </div>
        )
    }
}
export default Child;

코드 설명: 하위 구성 요소에서render에서this를 직접 사용합니다.props는 부모 구성 요소가 전송한 데이터를 받아들여 직접 사용합니다.하위 구성 요소가 받아들일 데이터를 추천하지 않습니다.this를 사용하십시오.setSate 방식으로 처리됩니다.
주요 코드:

<div>{this.props.name}</div>
<div>{this.props.age}</div>

둘째, 서브어셈블리에서 상위 어셈블리로 데이터 전송

React 프레임워크에서 하위 구성 요소가 하위 구성 요소로 데이터를 전송합니다. 상위 구성 요소가 하위 구성 요소로 데이터를 전송하는 데 의존해야 합니다.실제로는 부모 구성 요소가 자신의 역할 영역의 함수를 하위 구성 요소에 전송하는 것이다.하위 구성 요소는 이 함수를 호출하여 전송할 데이터를 함수의 매개 변수 형식을 통해 부모 구성 요소에 전송합니다.

2.1, 상위 구성 요소 코드

위의 코드 예시에서 부모 구성 요소에 함수를 정의하고 이 함수를 하위 구성 요소에 전송했습니다.

class App extends Component {
......
    callback=(msg,name,age)=>{
        // setState , msg , child 
        this.setState({msg});
        this.setState({name});
        this.setState({age});
    }
  render() {
    return (
      <div className="App">
        <Child callback={this.callback}></Child>
      </div>
    );
  }
}
export default App;

부모 구성 요소는 자신의 역할 영역의 함수를 하위 구성 요소에 전달하고, 하위 구성 요소는 this.props 을 통해 이 함수를 호출하는 과정에서 파라미터를 통해 데이터를 그룹 구성 요소로 전송한다.
여기 부모 구성 요소는 세 가지 인삼이 있습니다: msg,name,age;서브어셈블리가 데이터를 전송하면 상위 어셈블리는 이를 this.setState 방식으로 처리합니다.

2.2, 서브어셈블리 코드

서브어셈블리는this를 사용합니다.props는 부모 구성 요소로 전송된 함수를 받아들인다.이 함수를 매개 변수를 통해 부모 구성 요소에 데이터를 전송하는 방법을 호출합니다.

class Child extends React.Component{
......
    change=()=>{
        this.props.callback(this.state.msg,this.state.name,this.state.age);
    }
    render(){
        return(
            <div>
                <button onClick={this.change}> </button>
            </div>
        )
    }
}
export default Child;

서브어셈블리에 방법change()이 생성되었습니다. 이 방법은 클릭 이벤트onClick와 연결됩니다.change() 방법에서 this.props.callback() 함수(부모 구성 요소가 전송한 함수)를 호출합니다.함수의 실참은 서브어셈블리가 부모 어셈블리에 전송하는 데이터입니다.
이상은 React 부모 구성 요소와 하위 구성 요소의 데이터 전송에 대한 상세한 내용입니다. React 부모 구성 요소와 하위 구성 요소의 데이터 전송에 대한 더 많은 자료는 저희의 다른 관련 글을 주목해 주십시오!