React.cloneElement에 props 추가

1539 단어 React

tl;dr


React의children에 특정props를 추가하고 싶을 때React.cloneElement를 사용합니다.

하고 싶은 일

<Dialog closeEvent='onFinish'>
  <RegistrationForm/>
</Dialog>
Dialog는 모드 대화상자에 표시되는 구성 요소로 그 중RegistrationForm은 등록 형식에서 다양한 곳에서 사용할 수 있는 재사용 가능한 느낌을 완성했다.Dialog 자체에 표준 닫기 단추가 표시되지만 등록 형식의 처리가 끝난 후에 자동으로 닫힐 것입니다.
그럼에도 불구하고 RegistrationForm 자체가 Dialog 내에서 사용하는 것을 의식하지 못했기 때문에 처리가 성공하면 모드 대화상자를 닫는 처리를 RegistrationForm 자체에 넣을 수 없습니다.Dialogchildren로 전달된 구성 요소의 특정 이벤트에 대해 모드 대화상자를 닫는 처리를 설정하면 될 것 같지만 뒤에서 children의props를 어떻게 지정하면 좋을까요?

React.cloneElement



https://facebook.github.io/react/docs/top-level-api.html#react.cloneelement
새 프로포즈를 기존 프로포즈에 통합할 수 있습니다.
render() {
  return React.cloneElement(
    this.props.children,
    {マージしたいprops}
  );
}
이런 느낌이야.
이쪽 fiddle에 설치해 봤어요.상세한 통제는 없지만 Content 모든 것이 다이얼로그 안에 있다는 것을 깨닫지 못하게 다이얼로그를 닫는 처리를 추가했다.
https://jsfiddle.net/hokuma/1mu5opr4/

좋은 웹페이지 즐겨찾기