반응 어린이 방법을 사용하는 방법

반응 자식 메서드는 "this.props.children"을 처리하는 데 사용됩니다. 1. React.Children.map() 2. React.Children.forEach(); () ; 4. React.Children.only(); 5. React.Children.toArray().

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

반응 어린이 방법을 사용하는 방법은 무엇입니까?

React.Children에 대한 자세한 설명

React.Children은 this.props.children을 처리하는 도구를 제공합니다. this.props.children은 모든 데이터(구성 요소, 문자열, 함수 등)가 될 수 있습니다. React.children에는 5가지 메서드가 있습니다: React.Children.map(), React.Children.forEach(), React.Children.count(), React.Children.only(), React.Children.toArray(), 일반적으로 React를 사용함 .cloneElement()는 this.props.children과 함께 사용됩니다.

• React.Children.map()

React.Children.map()은 Array.prototype.map()과 다소 유사합니다. 이 메서드는 자식이 배열인 경우 배열을 반환하고, null이거나 정의되지 않은 경우 null 또는 정의되지 않은 것을 반환합니다. 첫 번째 매개변수는 children이며, 이 예에서는 Father 구성요소의 'hello world!' 및 () =>2333

두 번째 매개변수는 function 이고, function 의 첫 번째 매개변수는 탐색된 각 항목이고, 두 번째 매개변수는 해당 인덱스입니다.

function Father({children}) {
    return(
      <div>
      {React.Children.map(children, (child, index) => {
          ...
      })}
      </div>    
    )        
 }
<Father>
    hello world!
    {() => <p>2333</p>}
</Father>

• React.Children.forEach()

　 React.Children.map()과 동일하지만 차이점은 반환이 없다는 점입니다.

• React.Children.count()

React.Children.count()는 자녀 수를 계산하고 반환하는 데 사용됩니다. 계산에 children.length를 사용하지 마세요. Father 구성 요소에 'hello world!'만 있으면 12가 반환되며 이는 분명히 잘못된 결과입니다.

function Father({children}) {
    return(
      <div>
      {React.Children.count(children)}
      </div>    
    )        
 }
<Father>
    hello world!
    {() => <p>2333</p>}
</Father>

• React.Children.only()

children에 자식이 한 명만 있는지 확인하고 돌려줍니다. 그렇지 않으면 이 메서드에서 오류가 발생합니다.

function Father({children}) {
    return(
      <div>
      {React.Children.only(children)}
      </div>    
    )        
 }
<Father>
    hello world!
</Father>

• React.Children.toArray()

자식을 배열로 변환합니다. 자식을 정렬할 때

function Father({children}) {
    let children1 = React.Children.toArray(children);
    return(
      <div>
      {children1.sort().join(&#39; &#39;)}
      </div>    
    )        
 }
<Father>
    {&#39;ccc&#39;}
    {&#39;aaa&#39;}
    {&#39;bbb&#39;}
</Father>
//渲染结果： aaa bbb ccc

를 사용해야 합니다. React.Children.toArray() 메서드를 사용하지 않으면 됩니다. children.sort()가 직접 보고됩니다.

예:

예를 들어 이러한 요구 사항이 있는 경우 작업을 완료하려면 3단계가 필요합니다. 빛이 켜질 것입니다.

index.jsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {Steps, Step} from './Steps';
function App() {
    return (
        <div>
        <Steps currentStep={1}>  //完成相应的步骤，改变currentStep的值。如，完成第一步currentStep赋值为1，完成第二部赋值为2
            <Step />
            <Step />
            <Step />
            </Steps>
        </div>
    );
}
ReactDOM.render(<App />, document.getElementById(&#39;root&#39;));

Steps.jsx

import * as React from 'react';
import './step.less';
function Steps({currentStep, children}) {
    return (
        <div>
         {React.Children.map(children, (child, index) => {
            return React.cloneElement(child, {
              index: index,
              currentStep: currentStep
            });
         })}
    　　</div>
    );
}
function Step({index, currentStep}: any) {
    return <div className={`indicator${currentStep >= index + 1 ? &#39; active&#39; : &#39;&#39;}`} />;
}
export {Steps, Step};

steps.less

.indicator { display: inline-block; width: 100px; height: 20px; margin-right: 10px; margin-top: 200px; background: #f3f3f3; &.active {
    background: orange;
  }

권장 학습: "react 비디오 튜토리얼"

위 내용은 반응 어린이 방법을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!