오늘 우리는 다른 구성 요소와 통신하는 데 사용되는 Reactjs 소품에서 우리 모두가 알고 있는 Reactjs에서 새롭고 진보된 것을 배웁니다.

이제 우리는 최상위 API를 사용하여 React에서 복합 구성 요소라는 다른 것을 배웁니다.

1.React.Children.map
2.React.cloneElement()

최종 출력은 아래 이미지와 같아야 합니다.

반응 아코디언

아코디언 컴포넌트 코드

<Accordion>
        <Heading>Heading 1</Heading>
        <Text>
          “You've gotta dance like there's nobody watching, Love like you'll
          never be hurt, Sing like there's nobody listening, And live like it's
          heaven on earth.” ― William W. Purkey
        </Text>
        <Heading>Heading 2</Heading>

        <Text>
          “Don’t walk in front of me… I may not follow Don’t walk behind me… I
          may not lead Walk beside me… just be my friend” ― Albert Camus
        </Text>
        <Heading>Heading 3</Heading>

        <Text>
          “Darkness cannot drive out darkness: only light can do that. Hate
          cannot drive out hate: only love can do that.” ― Martin Luther King
          Jr., A Testament of Hope: The Essential Writings and Speeches
        </Text>
        <Heading>Heading 4</Heading>

        <Text>
          Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.
          Integer ut neque. Vivamus nisi metus, molestie vel, gravida in,
          condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi.
          Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu
          ante scelerisque vulputate.
        </Text>
        <Heading>Heading 5</Heading>
        <Text>
          “I believe that everything happens for a reason. People change so that
          you can learn to let go, things go wrong so that you appreciate them
          when they're right, you believe lies so you eventually learn to trust
          no one but yourself, and sometimes good things fall apart so better
          things can fall together.” ― Marilyn Monroe
        </Text>
      </Accordion>

이제 Accordion 구성 요소가 다른 유형의 하위 예제 제목, 텍스트를 보유하고 있는 위의 코드에서 로직을 살펴보겠습니다.

아코디언 구성 요소 구현.

class Accordion extends React.Component {
  state = {
    active: -1
  };

  onShow = i => {
    this.setState({
      active: i
    });
  };
  render() {
    const children = React.Children.map(this.props.children, (child, i) => {
      return React.cloneElement(child, {
          heading: this.state.active  === i,
          text: this.state.active + 1 === i,
          onShow: () => this.onShow(i)
      });
    });

    return <div className="accordion">{children}</div>;
  }
}

위의 코드는 자식을 반환하는 대신 React.Children.map을 사용하여 자식을 매핑하고 일부 상태를 Children에 전달하여 자식을 복제하는 것입니다. 이는 상태를 자식에게 전달한다는 의미입니다.

제목 구성 요소.

class Heading extends React. Component {
  render() {
    const { heading, onShow, children } = this.props;

    return (
      <h2 className={heading ? "active" : "normal"} onClick={onShow}>
        {children}
      </h2>
    );
  }
}

문자 구성요소

class Text extends React.Component {
  contentBox = () => {
    if (!this.props.text) {
      return null;
    } else {
      return (
        <div className="content-box">
          <p className="text">{this.props.children}</p>
        </div>
      );
    }
  };

  render() {
    return this.contentBox();
  }
}

다른 예



Text 또는 Heading 구성 요소 내부에 상태가 없는 것을 보셨습니까?

여러분이 즐거우셨기를 바랍니다....

데모 URL

코드 저장소