반응의 부모-자식 구성 요소는 무엇입니까-프런트엔드 Q&A-php.cn

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

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

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

1. React

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

class App extends Component{ }

로그인 후 복사

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

二、父子组件

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

import React from 'react'; import Children from './Children'; class Up extends React.Component { constructor(props){ super(props); this.state = { } } render(){ console.log("render"); return(  up  
 ) } } export default Up;

로그인 후 복사

import React from 'react'; class Children extends React.Component{ constructor(props){ super(props); this.state = { } } render(){ return (  Children 
 ) } } export default Children;

로그인 후 복사

三、父组件给子组件传值

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

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

로그인 후 복사

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

this.props.msg

로그인 후 복사

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

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

import React from 'react'; import Children from './Children'; class Up extends React.Component { constructor(props){ super(props); this.state = { } } render(){ console.log("render"); return(  up  
 ) } } export default Up;

로그인 후 복사

import React from 'react'; class Children extends React.Component{ constructor(props){ super(props); this.state = { } } render(){ return (  Children 
 {this.props.msg} 
 ) } } export default Children;

로그인 후 복사

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

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

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

import React from 'react'; import Children from './Children'; class Up extends React.Component { constructor(props){ super(props); this.state = { } } run = () => { console.log("父组件run方法"); } render(){ console.log("render"); return(  up  
 ) } } export default Up;

로그인 후 복사

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

import React from 'react'; class Children extends React.Component{ constructor(props){ super(props); this.state = { } } run = () => { this.props.run(); } render(){ return (  Children 
  
 ) } } export default Children;

로그인 후 복사

상위 구성 요소는 값과 메소드를 구성 요소에 전달할 수 있으며, 심지어 자신을 하위 구성 요소에 전달할 수도 있습니다.

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

import React from 'react'; import Children from './Children'; class Up extends React.Component { constructor(props){ super(props); this.state = { } } run = () => { console.log("父组件run方法"); } render(){ console.log("render"); return(  up  
 ) } } export default Up;

로그인 후 복사

import React from 'react'; class Children extends React.Component{ constructor(props){ super(props); this.state = { } } run = () => { console.log(this.props.msg); } render(){ return (  Children 
  
 ) } } export default Children;

로그인 후 복사

3.2 메소드 전달

import React from 'react'; import Children from './Children'; class Up extends React.Component { constructor(props){ super(props); this.state = { } } getChildrenData = (data) => { console.log(data); } render(){ console.log("render"); return(  up  
 ) } } export default Up;

로그인 후 복사

import React from 'react'; class Children extends React.Component{ constructor(props){ super(props); this.state = { } } render(){ return (  Children 
  
 ) } } export default Children;

로그인 후 복사

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

import React from 'react'; import Children from './Children'; class Up extends React.Component { constructor(props){ super(props); this.state = { } } clickButton = () => { console.log(this.refs.children); } render(){ console.log("render"); return(  up   
 ) } } export default Up; ``` ```js import React from 'react'; class Children extends React.Component{ constructor(props){ super(props); this.state = { title: "子组件" } } runChildren = () => { } render(){ return (  Children 
 
 ) } } 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 하위 구성 요소가 상위 구성 요소에 값을 전달합니다하위 구성 요소가 해당 값을 상위 구성 요소에 전달합니다. 트리거 메서드를 통한 구성 요소rrreeerrreee5. 상위 구성 요소 refsrrreee를 통해 하위 구성 요소 특성 및 메서드 가져오기[관련 권장 사항: Redis 비디오 튜토리얼]

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