반응 상위 구성 요소와 하위 구성 요소 간의 가치 전달에 대한 자세한 소개

이 글에서는 주로 React 상위 컴포넌트와 하위 컴포넌트 사이의 값 전달 방법을 소개합니다. 편집자는 그것이 꽤 좋다고 생각하므로 지금 공유하고 참고용으로 제공하겠습니다. 에디터를 따라가서 살펴볼까요

개념적으로 컴포넌트는 닫힌 환경입니다. React에는 단방향 데이터 흐름 설계가 있습니다. 즉, 상위 구성 요소만 하위 구성 요소에 데이터를 전달한다는 의미입니다. 올바른 기술 사양을 사용하면 소유자 구성 요소가 소유한 구성 요소에 데이터를 설정할 수 있습니다.

하위 구성 요소는 어떻게 상위 구성 요소와 통신합니까? 간단히 말하면 우회적인 접근 방식입니다. 메서드(함수)가 상위 구성 요소에 설정된 다음 하위 구성 요소의 props에 전달됩니다. 자식 컴포넌트 이벤트가 발생하면 이 props에서 설정한 메소드(함수)를 직접 호출합니다. 그런데 중간에 누군가(오브젝트)가 함수 설정을 호출하는데, 이것이 바로 이 역할입니다.

props를 사용하여 상위 컴포넌트를 하위 컴포넌트로 설정하고, 하위 컴포넌트에서 상위 컴포넌트로 위에서 언급한 방법을 사용합니다. 이것이 기본적인 루틴이지만 상당히 번거롭고 유연성이 없기 때문에 단순한 컴포넌트 구조에만 적용됩니다. 그래서 하위컴포넌트와 하위컴포넌트간 통신이 너무 쉽지 않습니다. 물론 복잡한 애플리케이션에서는 이 문제를 해결하기 위해 Flux나 Redux를 추가로 사용해야 한다는 말을 들어보셨을 것입니다.

그러나 전반적인 React 애플리케이션 디자인을 생각할 때 전역 상태인 애플리케이션 도메인 상태 개념을 가지고 있어야 합니다. 첫 번째는 일반적으로 하위 구성 요소가 아닌 상위 구성 요소에 있는 애플리케이션 도메인 상태입니다. 많은 하위 구성 요소가 있을 수 있으며 트리 구조의 깊숙한 곳에 위치합니다.

예:

하위 구성 요소

import React, { Component } from 'react'

export default class Item extends Component {
 constructor(props) {
  super(props)

  this.state = {
   prices: 0
  }
 }

 handleChange(){
  const prices =800;
  this.setState({
   prices: price
  })
  //用传过来的changePrice属性(props)，是个函数，呼叫它把price交给父组件中的函数去处理
  this.props.changePrice(price)
 }

 render() {
  const { prices } = this.state;
    return (
     <p>
       <p onChange={this.handleChange.bind(this)}>
       </p>
       <p>{prices}</p>
     </p>
    )
 }
}

부모 구성 요소

import React, { Component } from 'react';
import Item from './Item'

class App extends Component {
 constructor(props) {
  super(props)

  this.state = {price: 0}
 }
 
 //给子组件用来传price用的方法
 changePrice(price){
  this.setState({price: price})
 }

 render() {
  return (
   <p>
    <Item changePrice={this.changePrice.bind(this)}/>
    <p>{this.state.price}</p>
   </p>
  );
 }
}

export default App;

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