TIL defaultPropsとprops.children
1. defaultProps
2. props.children
1. defaultProps
🔑
defaultProps
は、親コンポーネントとして個別のprops値が渡されていないときに表示される初期値を設定するために使用される.🔑 親コンポーネント(
Parent
)に渡されたprops値がない場合は、次のようになります.import React from "react";
import Child from "./Child";
function Parent() {
return (
<div>
자식 컴포넌트로 전달한 props는
<MyComponent /> // 자식요소로 전달하는 props가 없음
</div>
);
}
export default Parent;
サブエレメント出力は、Child.defaultProps
の初期値("디폴트"
)に設定される.import React from "react";
const Child = (props) => {
return <div> {props.missingProps} 입니다. </div>;
}
// missingProps가 부모 컴포넌트로부터 전달되지 않았으므로
// 아래의 defaultProps로 선언한 객체 중 missingProps의 value를 출력
Child.defaultProps = {
missingProps: "디폴트"
}
export default Child;
どのように活用しますか?
defaultProps
値「propsが正しく渡されていません.」設定2. props.children
🔑
props.children
は、サブアセンブリタグによって囲まれたすべての要素をサブアセンブリに渡す.// 부모 컴포넌트
import React from "react";
import Child from "./Child";
function Parent() {
return (
<Child>
<h1>Welcome</h1>
<h2>to my webpage</h2>
</Child>
);
}
export default Parent;
// 자식 컴포넌트
import React from "react";
const Child = (props) => {
return <div> {props.children} </div>;
}
export default Child;
https://ko.reactjs.org/docs/typechecking-with-proptypes.html
https://ko.reactjs.org/docs/composition-vs-inheritance.html
作成中にエラーが発生した場合は、フィードバックに感謝します。開発者に小さなフィードバックを残してほしいです。ありがとうございます:)
Reference
この問題について(TIL defaultPropsとprops.children), 我々は、より多くの情報をここで見つけました https://velog.io/@okcleff/TIL-defaultProps와-props.childrenテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol