지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > 프런트엔드 Q&A > 반응의 부모-자식 구성 요소는 무엇입니까

반응의 부모-자식 구성 요소는 무엇입니까

青灯夜游
풀어 주다： 2022-07-13 19:02:04
원래의
1996명이 탐색했습니다.

리액트 컴포넌트 간의 상호 호출에서 호출자를 부모 컴포넌트, 호출 수신자를 자식 컴포넌트라고 합니다. 부모 컴포넌트와 자식 컴포넌트 사이에 값을 전달할 수 있습니다. 1. 부모 컴포넌트가 자식 컴포넌트에 값을 전달하면 전달할 값이 먼저 자식 컴포넌트에 전달되고, 그 다음 자식 컴포넌트에서는 props를 사용하여 2. 자식 컴포넌트 부모 컴포넌트에 값을 전달할 때, 트리거 메소드를 통해 부모 컴포넌트에 값을 전달해야 합니다.

반응의 부모-자식 구성 요소는 무엇입니까

이 튜토리얼의 운영 환경: Windows 7 시스템, React18 버전, Dell G3 컴퓨터.

1. React

React 구성 요소는 자체 정의된 HTML이 아닌 태그입니다. React 구성 요소는 첫 글자를 대문자로 사용해야 합니다: 首字母大写：

class App extends Component{
}

<app></app>
로그인 후 복사

반응의 부모-자식 구성 요소는 무엇입니까

二、父子组件

组件的相互调用中，把调用者称为父组件，被调用者称为子组件：

import React from 'react';
import Children from './Children';

class Up extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            
        }

    }

    

    render(){
        console.log("render");
        return(
            <div>
                up
                <children></children>
            </div>
        )
    }
}

export default Up;
로그인 후 복사
import React from 'react';

class Children extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            
        }
    }
    
    render(){

        return (
            <div>
                Children
            </div>
        )
    }
}

export default Children;
로그인 후 복사

三、父组件给子组件传值

父组件向子组件传值使用props。父组件向子组件传值时，先将需要传递的值传递给子组件，然后在子组件中，使用props来接收父组件传递过来的值。

父组件在调用子组件的时候定义一个属性：

<children></children>
로그인 후 복사

这个值msg会绑定在子组件的props

this.props.msg
로그인 후 복사
반응의 부모-자식 구성 요소는 무엇입니까

2. 부모와 자식의 상호소명에

구성 요소에 호출자를 상위 구성 요소라고 하고 호출자를 하위 구성 요소라고 합니다. 

import React from &#39;react&#39;;
import Children from &#39;./Children&#39;;

class Up extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            
        }

    }

    

    render(){
        console.log("render");
        return(
            <div>
                up
                <Children msg="父组件传值给子组件" />
            </div>
        )
    }
}

export default Up;
로그인 후 복사
import React from &#39;react&#39;;

class Children extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            
        }
    }
    
    render(){

        return (
            <div>
                Children
                <br />
                {this.props.msg}
            </div>
        )
    }
}

export default Children;
로그인 후 복사
반응의 부모-자식 구성 요소는 무엇입니까

3 상위 구성 요소는 값을 전달합니다. to the child 컴포넌트

부모 컴포넌트는 값을 자식 컴포넌트에 전달합니다. 값은 props를 사용합니다. 부모 컴포넌트가 자식 컴포넌트에 값을 전달할 때 전달할 값이 먼저 자식 컴포넌트에 전달되고, 그 다음 자식 컴포넌트에서는 props를 사용하여 부모 컴포넌트가 전달한 값을 받습니다.

상위 구성 요소는 하위 구성 요소를 호출할 때 속성을 정의합니다. 반응의 부모-자식 구성 요소는 무엇입니까

import React from &#39;react&#39;;
import Children from &#39;./Children&#39;;

class Up extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            
        }

    }

    run = () => {
        console.log("父组件run方法");
    }
    

    render(){
        console.log("render");
        return(
            <div>
                up
                <Children run={this.run} />
            </div>
        )
    }
}

export default Up;
로그인 후 복사

이 값 msg는 하위 구성 요소의 props 속성에 바인딩되고 하위 구성 요소는 직접 사용할 수 있습니다.

import React from &#39;react&#39;;

class Children extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            
        }
    }

    run = () => {
        this.props.run();
    }
    
    render(){

        return (
            <div>
                Children
                <br />
                <button onClick={this.run}>Run</button>
            </div>
        )
    }
}

export default Children;
로그인 후 복사
상위 구성 요소는 값과 메소드를 구성 요소에 전달할 수 있으며, 심지어 자신을 하위 구성 요소에 전달할 수도 있습니다.

3.1 값 전달반응의 부모-자식 구성 요소는 무엇입니까

import React from &#39;react&#39;;
import Children from &#39;./Children&#39;;

class Up extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            
        }

    }

    run = () => {
        console.log("父组件run方法");
    }
    

    render(){
        console.log("render");
        return(
            <div>
                up
                <Children msg={this}/>
            </div>
        )
    }
}

export default Up;
로그인 후 복사
import React from &#39;react&#39;;

class Children extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            
        }
    }

    run = () => {
        console.log(this.props.msg);
    }
    
    render(){

        return (
            <div>
                Children
                <br />
                <button onClick={this.run}>Run</button>
            </div>
        )
    }
}

export default Children;
로그인 후 복사

3.2 메소드 전달

import React from &#39;react&#39;;
import Children from &#39;./Children&#39;;

class Up extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            
        }

    }

    getChildrenData = (data) => {
        console.log(data);
    }
    

    render(){
        console.log("render");
        return(
            <div>
                up
                <Children upFun={this.getChildrenData}/>
            </div>
        )
    }
}

export default Up;
로그인 후 복사
import React from &#39;react&#39;;

class Children extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            
        }
    }
    
    render(){

        return (
            <div>
                Children
                <br />
                <button onClick={() => {this.props.upFun("子组件数据")}}>Run</button>
            </div>
        )
    }
}

export default Children;
로그인 후 복사
반응의 부모-자식 구성 요소는 무엇입니까

3.3은 상위 구성 요소가 하위 구성 요소에 값을 전달합니다

import React from &#39;react&#39;;
import Children from &#39;./Children&#39;;

class Up extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            
        }

    }

    clickButton = () => {
        console.log(this.refs.children);
    }
    

    render(){
        console.log("render");
        return(
            <div>
                up
                <Children ref="children" msg="test"/>
                <button onClick={this.clickButton}>click</button>
            </div>
        )
    }
}

export default Up;
```
```js
import React from &#39;react&#39;;

class Children extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            title: "子组件"
        }
    }

    runChildren = () => {
        
    }
    
    render(){

        return (
            <div>
                Children
                <br />
            </div>
        )
    }
}

export default Children;
```
![반응의 부모-자식 구성 요소는 무엇입니까](https://img-blog.csdnimg.cn/20200722065137748.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xldGlhbnhm,size_16,color_FFFFFF,t_70)
로그인 후 복사
rrreee

🎜🎜4 하위 구성 요소가 상위 구성 요소에 값을 전달합니다🎜🎜🎜하위 구성 요소가 해당 값을 상위 구성 요소에 전달합니다. 트리거 메서드를 통한 구성 요소🎜rrreeerrreee🎜🎜🎜🎜🎜5. 상위 구성 요소 refs🎜🎜rrreee🎜를 통해 하위 구성 요소 특성 및 메서드 가져오기[관련 권장 사항: 🎜Redis 비디오 튜토리얼🎜]🎜

위 내용은 반응의 부모-자식 구성 요소는 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
react 상위-하위 구성요소
원천：php.cn
이전 기사：반응 조건부 렌더링이란 무엇입니까? 다음 기사：React의 이전 라이프사이클과 새로운 라이프사이클의 차이점은 무엇입니까?
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1361
React의 정렬 메서드에서 렌더링(필터 및 페이지 매김 사용)을 트리거하는 방법은 무엇입니까? 내 Sort.js 스타일 구성 요소는 다음과 같습니다. <SortWrapper><SortText>SortBy</SortText>&...
에서 2024-04-06 21:28:37
0
1
2257
3단계 계층구조의 맞춤 분류를 사용하여 우커머스 관련 상품을 선택하세요. 나는 "스포츠"라는 사용자 정의 분류를 가진 wooCommerce 상점을 가지고 있습니다. 분류에는 부모, 어린이, 어린이의 세 가지 수준이 있...
에서 2024-04-06 20:05:30
0
1
544
Livewire 게으른 자리 표시자와 함께 laravel 구성 요소를 사용하는 방법 livewire3 자리 표시자 안에 내 laravel 구성 요소의 뼈대를 추가하고 싶습니다. 지금까지 시도한 작업: Laravel 구성 요소를 포함하는 Livew...
에서 2024-04-06 20:02:10
0
2
543
opentbs를 사용하여 odt 파일을 생성할 때 발생하는 문제: 동일한 키의 값이 별도의 열이 아닌 동일한 행에 표시됩니다. PHP를 사용하여 odt를 만들기 위해 OpenTbs라는 라이브러리를 사용하고 있는데, 열과 행이 동적으로 생성되기 때문에 사용하고 있습니다. 행과 열을 만드는 ...
에서 2024-04-06 20:18:18
0
1
483
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿