객체를 jsx에 소품으로 전달

객체를 jsx에 소품으로 전달

Jsx에 전달하고 싶은 공통 키 값 소품이 여러 개 들어 있는 개체를 가지고 있다.이와 비슷한 것:

const commonProps = {myProp1: 'prop1',myProp2: 'prop2'};
<MyJsx commonProps />

나는 이것이 개별 소품을 전달하는 역할을 하기를 원한다.

<MyJsx myProp1={commonProps.myProp1} myProp2={commonProps.myProp2}/>

이것이 가능한가?

이것이 가능한가?

그래, 가능하지만 네가 보내는 방법은 정확하지 않아.

의 의미<MyJsx commonProps />다음과 같은 경우:

<MyJsx commonProps={true} />

따라서 값을 지정하지 않으면 기본적으로true. 객체를 통과하려면 다음과 같이 써야 한다.

const commonProps = {myProp1: 'prop1',myProp2: 'prop2'};
<MyJsx commonProps={commonProps} />

업데이트:

객체가 있고 모든 속성을 별도의 받침대로 전달하려면 다음과 같이 입력하십시오.

<MyJsx {...commonProps} />

스프레드 오퍼레이터를 사용하여 이렇게 할 수 있다.

간단히 할 수 있다.<MyJsx {...commonProps} />

이제 commonProps에 있는 모든 개별 속성은 MyJsx에 개별 소품으로 보내질 것이다.

이렇게 이중 교정기를 사용해야 한다.

messages={{tile:'Message 1'}}

또는 많은 개체를 전달하려면:

messages={[{title:'Message 1', name: 'Andrew'}, {title:'Message 2', name: 'Greg'}]}

교정기 안의 JS 구문일 뿐이다.

최종 구성 요소는 다음과 같을 수 있다.

<Chat title="Some str" messages={[{title:'Message 1', name: 'Andrew'}, {title:'Message 2', name: 'Greg'}]} />

소품은 두 가지 방법으로 물건으로 넘길 수 있다.

const commonProps = {myProp1: 'prop1', myProp2: 'prop2'};

1.확산 연산자 사용:-

<MyJsx {...commonProps} />

2.그 소품들을 간단히 통과하라:-

<MyJsx commonProps = {commonProps ? commonProps : true} />

이런 것도 할 수 있다.

<MyJsx objectProps={{
    prop1,
    prop2
}}/>

이렇게 하면 쓸 필요가 없다.prop1: prop1(변수 또는 함수인 경우:state setState).

그런 다음 분해 기능을 사용하여 구성 요소에서 액세스할 수 있다.let { prop1, prop2 } = props.objectProps

참조URL: https://stackoverflow.com/questions/49081549/passing-object-as-props-to-jsx