React.cloneElement에 props 추가
1539 단어 React
tl;dr
React의children에 특정props를 추가하고 싶을 때React.cloneElement
를 사용합니다.
하고 싶은 일 <Dialog closeEvent='onFinish'>
<RegistrationForm/>
</Dialog>
Dialog
는 모드 대화상자에 표시되는 구성 요소로 그 중RegistrationForm
은 등록 형식에서 다양한 곳에서 사용할 수 있는 재사용 가능한 느낌을 완성했다.Dialog
자체에 표준 닫기 단추가 표시되지만 등록 형식의 처리가 끝난 후에 자동으로 닫힐 것입니다.
그럼에도 불구하고 RegistrationForm
자체가 Dialog
내에서 사용하는 것을 의식하지 못했기 때문에 처리가 성공하면 모드 대화상자를 닫는 처리를 RegistrationForm
자체에 넣을 수 없습니다.Dialog
의children
로 전달된 구성 요소의 특정 이벤트에 대해 모드 대화상자를 닫는 처리를 설정하면 될 것 같지만 뒤에서 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/
Reference
이 문제에 관하여(React.cloneElement에 props 추가), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/halhide/items/31cb9d828d2021dc8324
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<Dialog closeEvent='onFinish'>
<RegistrationForm/>
</Dialog>
Dialog
는 모드 대화상자에 표시되는 구성 요소로 그 중RegistrationForm
은 등록 형식에서 다양한 곳에서 사용할 수 있는 재사용 가능한 느낌을 완성했다.Dialog
자체에 표준 닫기 단추가 표시되지만 등록 형식의 처리가 끝난 후에 자동으로 닫힐 것입니다.그럼에도 불구하고
RegistrationForm
자체가 Dialog
내에서 사용하는 것을 의식하지 못했기 때문에 처리가 성공하면 모드 대화상자를 닫는 처리를 RegistrationForm
자체에 넣을 수 없습니다.Dialog
의children
로 전달된 구성 요소의 특정 이벤트에 대해 모드 대화상자를 닫는 처리를 설정하면 될 것 같지만 뒤에서 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/
Reference
이 문제에 관하여(React.cloneElement에 props 추가), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/halhide/items/31cb9d828d2021dc8324
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
render() {
return React.cloneElement(
this.props.children,
{マージしたいprops}
);
}
Reference
이 문제에 관하여(React.cloneElement에 props 추가), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/halhide/items/31cb9d828d2021dc8324텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)