[React] props

14492 ワード
React テキストリンク

🌱 props


propsはpropertiesの略で、素子に任意の値を渡すために使用されます.
import React from 'react';
import Hello from './hello';
export default function App () {
  return (
    <Hello name="anne" />
  );
}
import React from 'react';
export default function Hello (props) {
  return (
    <div>
      안녕하세요 {props.name}
    </div>
  );
}

🌿 複数のprops非構造化割り当て


props内部の値をクエリーするたびにpropsが入力され、関数のパラメータに非構造化賦値構文を使用するとコードをより簡潔に記述できます.
import React from 'react';
import Hello from './hello';
export default function App () {
  return (
    <Hello name="anne" color="red" />
  );
}
import React from 'react';
export default function Hello (props) {
  return (
    <div style={{ color: props.color }}>
      안녕하세요 {props.name}
    </div>
  );
}
import React from 'react';
export default function Hello ({ color, name }) {
  return (
    <div style={{ color }}>안녕하세요 {name}</div>
  );
}

☘️ defaultProps


構成部品にpropsを指定しない場合にデフォルトで使用する値を設定する場合は、defaultPropsという値を構成部品に設定できます.
import React from 'react';
function Hello (name) {
  return <div>안녕하세요 {name}</div>
}
Hello.defaultProps = {
  name: '이름없음'
}
export default Hello;
import React from 'react';
import Hello from './component/hello';
function App() {
  return (
    <>
      <Hello name="anne"/>
      <Hello />
    </>
  );
}
export default App;

🍀 props.children


エレメントラベル間に配置された値をクエリーしたい場合はprops.子供を使う.
import React from 'react';
export default function Wrapper ({ children }) {
  const style = {
    border: '2px dotted pink',
  };
  return (
    <div style={style}>
      {children}
    </div>
  );
}
import React from 'react';
export default function Hello(props) {
  return (
    <div>안녕하세요 {props.name}</div>
    );
}
import React from 'react';
import Hello from './components/hello';
import Wrapper from './components/wrapper';
export default function App () {
  return (
    <Wrapper>
      <Hello name="anne" />
      <Hello />
    </Wrapper>
  );
}

🌳 結論!
  • propsは、任意の値を構成部品に渡すために使用されます.
  • 複数の支柱が非構造化パーティションによって簡潔に作成する
    • .
    デフォルトは
  • defaultProps
  • props.childrenエレメントラベル間の検索値
    • TIL - Day 10
    395. Longest Substring with At Least K Repeating Characters - python3