React.cloneElement와 this.props.children은 언제 사용해야 합니까?

React.cloneElement와 this.props.children은 언제 사용해야 합니까?

저는 아직 React에 익숙하지 않습니다.인터넷의 많은 예에서 자녀 요소의 렌더링에 있어서의 이러한 변화를 볼 수 있어 혼란스럽다고 생각합니다.일반적으로는, 다음과 같이 표시됩니다.

class Users extends React.Component {
  render() {
    return (
      <div>
        <h2>Users</h2>
        {this.props.children}
      </div>
    )
  }
}

그런데 이런 예가 있습니다.

<ReactCSSTransitionGroup
     component="div"
     transitionName="example"
     transitionEnterTimeout={500}
     transitionLeaveTimeout={500}
     >
     {React.cloneElement(this.props.children, {
       key: this.props.location.pathname
      })}
</ReactCSSTransitionGroup>

API는 이해했지만 언제 사용해야 하는지 문서에서는 정확히 알 수 없습니다.

그럼 다른 사람은 할 수 없는 일은 뭘까?누가 더 좋은 예를 들어 설명해 줄 수 있나요?

props.children실제 아이들이 아니라 아이들을 묘사하는 것입니다.실제로 변경할 것은 없습니다.소품이나 기능을 변경할 수 없습니다.읽기만 하면 됩니다.수정이 필요한 경우 다음을 사용하여 새 요소를 생성해야 합니다.React.CloneElement.

https://egghead.io/lessons/react-use-react-cloneelement-to-extend-functionality-of-children-components

예:

의 App.js:

render() {   
    return(
            <Paragraph>
              <Sentence>First</Sentence>
              <Sentence>Second</Sentence>
              <Sentence>Third</Sentence>
            </Paragraph>   
    ) 
}

를 들어 R&A, R&A를 합니다.onClick의 의 각 Paragraph 당신의 ;에Paragraph.js을 사용하다

render() {
        return (
          <div>
          {React.Children.map(this.props.children, child => {
            return React.cloneElement(child, {
              onClick: this.props.onClick })   
         })}
         </div>
       ) 
}

간단하게 다음과 같이 할 수 있습니다.

render() {   
  return(
        <Paragraph onClick={this.onClick}>
          <Sentence>First</Sentence>
          <Sentence>Second</Sentence>
          <Sentence>Third</Sentence>
        </Paragraph>   
   ) 
}

주의:React.Children.map함수는 최상위 요소만 볼 수 있으며 이러한 요소가 렌더링하는 것은 볼 수 없습니다. 즉, 하위 요소에 직접 소품을 제공합니다(여기서<Sentence /> 이 더 , 이 소품들이 더 전해질 필요가 있다고 가정해 보겠습니다.<div></div> inside 의 한 쪽 <Sentence />「」를하는 onClickContext API를 사용합니다. 만들어 보세요.Paragraph와 「」의 양쪽 모두를 으로 하고 있습니다.Sentence소비자로서의 요소

편집:

대신 Vennesa의 답변을 보세요. 더 나은 설명입니다.

오리지널:

, ★★★★★★★★★★★★★★★★★.React.cloneElement반응하다

것에 {this.props.children}가 해당 요소에 합니다.클로닝은 부모가 요소를 전송하고 하위 구성요소가 해당 요소의 일부 소품을 변경하거나 실제 DOM 요소에 액세스하기 위한 참조와 같은 요소를 추가해야 하는 고급 시나리오에서 유용합니다.

위의 예에서는 자녀에게 제공하는 부모는 컴포넌트의 키 요건을 모르기 때문에 컴포넌트가 부여된 요소의 복사본을 작성하고 오브젝트 내의 고유 식별자에 따라 키를 추가합니다.키의 기능에 대한 자세한 내용은http://https://facebook.github.io/react/docs/multiple-components.html 를 참조해 주세요.

실은.React.cloneElement와는 엄밀하게 관련되어 있지 않다.this.props.children.

이 기능은 반응 요소를 복제할 때 유용합니다(PropTypes.element부모가 이러한 컴포넌트 내부(이벤트 핸들러 부착이나 할당 등)에 대한 지식을 갖지 않고 소품을 추가/추가한다.key/ref어트리뷰트)를 참조해 주세요.

반응 요소도 불변합니다.

React.cloneElement(요소, [props], [...children])는 다음과 거의 동일합니다.<element.type {...element.props} {...props}>{children}</element.type>

---

하지만, 그childrenProp in React는 특히 격납(일명 구성)에 사용됩니다.React.ChildrenAPI 및React.cloneElement소품을 사용하는 컴포넌트.아이는 내부적으로 더 많은 논리(상태 전환, 이벤트, DOM 측정 등)를 처리할 수 있습니다.또한 렌더링 파트를 사용하는 장소에는 리액트 라우터 또는 복합 컴포넌트가 있습니다.

마지막으로 언급할 가치가 있는 것은 반응 요소가 소품이나 어린이에만 국한되지 않는다는 것입니다.

function SplitPane(props) {
  return (
    <div className="SplitPane">
      <div className="SplitPane-left">
        {props.left}
      </div>
      <div className="SplitPane-right">
        {props.right}
      </div>
    </div>
  );
}

function App() {
  return (
    <SplitPane
      left={
        <Contacts />
      }
      right={
        <Chat />
      } />
  );
}

어떤 소품이든 간에 컴포넌트에 대한 좋은 계약을 정의하여 고객이 사용 여부에 관계없이 기본 구현 세부사항에서 분리할 수 있도록 하는 것이 관건입니다.React.Children,React.cloneElement 「」의 경우도 있습니다.React.createContext.

언급URL : https://stackoverflow.com/questions/37521798/when-should-i-be-using-react-cloneelement-vs-this-props-children