React 구성 요소에 Proces 제출 방법/적용 방법 전체

React 구성 요소에 Proces/수락을 제출하는 방법이 많은데 일괄적인 참조가 없어 설명하기 어려울 것이라 요약하고 싶습니다.
!
이 기사는 JS와 React의 입문자~초보자를 대상으로 한 것으로, JS·React에 있어서 반드시 엄격하고 정확한 표현이 아닐 수 있으니 상급자 여러분께서 많이 양해해 주시기 바랍니다.
또한 공식 문서에도 기술이 많이 포함되어 있지 않다β버전 문서에는 비교적 좋은 페이지가 있습니다: https://beta.reactjs.org/learn/passing-props-to-a-component

Propos 제공 방법

기본 제공 방법

전달props의 기본 구조는props名={値}이다.어떠한 가격도 이 기법을 통해 교부할 수 있다.많은 설명서는 문자열의 교부 방법부터 배우기 시작하지만 우선 이것이 기본이라는 것을 기억해야 이해하기 쉽다.

<MyComponent
  age={25}  // 数値
  rate={100 * 0.5} // 数値
  name={'John'} // 文字列
  greeting={`Hi, my name is ${name}`}  // テンプレートリテラル
  info={{ name: 'John', gender: 'male' }} // オブジェクト
  scores={[94, 98, 100]} // 配列
  name={name} // 変数
  isAdmin={false} // 真偽値
  onClose={() => {console.log()}} // 関数
　leftIcon={<Icon />} // Reactコンポーネント
  now={new Date()} // インスタンス
  wtf={null} // null
/>

이렇게 일일이 다 들 수 없다.자바스크립트로 수치를 평가할 수 있는 건 다 드립니다.
상대를 사귀는 방법은 쉽게 빠져들기 때문에 주의해야 한다

// 正しい
<MyComponent info={{ name: 'John', gender: 'male' }} />

// 誤り
<MyComponent info={ name: 'John', gender: 'male' } />

바깥쪽의 파괄호는 항상 JS로 그 내용의 표현을 평가하기 위한 것이지 대상을 표시하기 위한 것이 아니라는 것을 주의하십시오.

문자열 전달 방법

순수한 문자열에 관해서는 대부분 상술한 파괄호의 전달 방법이 아니라 props名="文字列"의 문법으로 전달한다.그러나 변수의 문자열, 템플릿 소양 등 자바스크립트를 평가하고자 하는 것은 이 방법으로 전달할 수 없다.

// 正しい
<MyComponent name="John" />

// 誤り
<MyComponent name=name />　// nameが何型であろうとこの書き方は誤り
<MyComponent greeting=`John` /> // テンプレートリテラルは{}で渡さないといけない

!
그나저나 JavaScript의 평가를 받고 싶다고 썼지만 JSX 구성 요소의 하위 요소 쓰기에도 비슷한 표현이 있다.

<Title>Hello</Title> // 文字列
<Title>100</Title> // 100という数値ではなく、"100"という文字列

<Title>{2 * 3}</Title>  // 2 * 3が評価され、6が表示される
<Title>{`My name is ${name}`}</Title> // テンプレートリテラルが評価されてnameの変数が展開されて表示

진정한 배송 방법

진실한 정보를 전달하려면 = 을 생략하고 props 이름만 쓸 수 있습니다.

<MyComponent isActive /> 
// ↑の書き方は↓と同義。
<MyComponent isActive={true} />

만약에 허위 정보를 전달하고 싶거나 가짜인지 진짜 변수인지 모르면 = 형식으로 전달해야 한다

<MyComponent isActive={false} />

const isActive = getIsActive() // booleanを返す任意の関数
<MyComponent isActive={isActive} /> // =で渡す
<MyComponent isActive /> // これは常にtrue

적용:object 제공 확장

JavaScript의 객체에는 Spread, Rest Spread 등의 구문이 있습니다.구성 요소의 프로포즈에서 이것을 사용하면 전개 대상을 토대로 키-value를 프로포즈 이름-값으로 한꺼번에 전달할 수 있습니다.

const info = { name: 'John', age: 25, gender: 'male'}

<MyComponent {...info} />
// ↑の書き方は↓と同義。
<MyComponent name={info.name} age={info.age} gender={info.gender} />

에도 Rest Spread를 사용하는 표기법이 있습니다.

const info = { name: 'John', age: 25, gender: 'male'}
const {name, ...rest} = info

<MyComponent {...rest} /> // ageとgenderだけを渡す

Proops 승인 방법

각양각색의 Pripos의 교부 방법을 보았지만, 받아들이는 방법은 매우 간단하다.왜냐하면, 얼마를 주든지 props는 하나의 대상으로 받아들여지기 때문에 서로 다른 유형에 따라 이 t를 교환합니다

기본적

얼마를 주든지 간에 프로퍼스는 하나의 대상이다.

<MyComponent name="John" />

function MyComponent(props) {
  console.log(props.name)
  // ...
}

여러 개에게 맡겨도 하나의 대상으로 받아들일 수 있다.

<MyComponent name="John" age={30} />

//　正しい
function MyComponent(props) {
  console.log(props.name, props.age)
  // ...
}

// 誤り
function MyComponent(name, age) {
  console.log(name, age)
  // ...
}

Object Destructuring 수신 방법 사용

리액트라기보다는 Object가 활용하는 기법을 JS적으로 펼치는 것이지만, 이 문법을 쓰면 프롭스.때로name과 일일이proops를 쓸 필요가 없어서 편리합니다.

<MyComponent name="John" age={30} />

function MyComponent({name, age}) {
  // ...
}
// ↑の書き方は↓と同義
function MyComponent(props) {
  const name = props.name
  const age = props.age
  // ...
}

Object Rest Spread 수신 방법 사용

상상하기 어렵지 않지만, 단순히 하나의 대상인 팝스가 어떻게 받아들이는지에 대한 JS식 표현법의 문제일 뿐이므로 스프레드, 레스트 스프레드 등으로 쓸 수도 있다.이것은 Button 구성 요소와 같이 추상도가 높은 구성 요소로 확장성을 높이는 데 자주 사용된다.

// id以外の全てのPropsを子にわたす
function MyComponent({id, ...rest}) {
  console.log(id)
  return <ChildComponent {...rest}>
}

끝말

다른 사람에게도 줄 수 있지만 자주 보는 기법은 대부분 이 기사에서 언급된 것 같다.만약 어떤 기법 등의 요구를 추가할 희망이 있다면, 나는 다시 한번 보충하고 싶다.