React.js - 속성 객체를 하위 구성요소로 전달하는 방법

React.js - 속성 객체를 하위 구성요소로 전달하는 방법

내 컴포넌트는tileGroup다른 속성의 컬렉션(배열)인 속성을 가집니다.

부모 컴포넌트(tileGroup)는 컬렉션의 각 속성 세트를 사용하여 새 컴포넌트를 생성하여 하위 컴포넌트 목록을 렌더링합니다.

현재 세트부터 자 컴포넌트까지 각 속성을 개별적으로 매핑하고 있습니다만, 컴포넌트의 속성 카운트가 증가하면 이 작업은 번거로워집니다.또한 보다 깔끔하고 간단한 방법이 있을 것입니다.

각 속성을 다시 매핑하지 않고 전체 속성 집합을 하위 구성 요소에 전달하려면 어떻게 해야 합니까?

코드 예:

tileGroupData = {someProperty: 'something', someOtherProperty:'something', 
                tiles: [{vsize:1, hsize:2, etc...}, {vsize:2,hsize:3,title:'whatever'}]};

컴포넌트를 만듭니다.

var tileGroup = React.createClass({
    render: function() {
       var thechildren = this.props.tiles.map(function(tile)
       {
           //this is what I DON'T want to be doing. 
           return <tileSimple vsize = {tile.vsize} hsize = {tile.hsize} content = {tile.content}/>;

           //what I DO want to be doing
           return <tileSimple allTheProps = {tile}/>; 
       });

transfer Props To가 폐지된 것 같습니다.최신 버전의 React에서는 JSX 확산 속성을 사용할 수 있습니다.

return <tileSimple {...tile} />;

자세한 내용은 이쪽: transfer Props 폐지행선지

이러한 사용 사례에서 가장 쉬운 것은 JSX 대신 JS API로 폴백하는 것입니다.

return tileSimple(tile);

동작 이유를 이해하려면 JSX 컴파일러 도구(http://facebook.github.io/react/jsx-compiler.html )를 사용하여 생성된 버전의 버전을 확인하십시오.

<tileSimple vsize = {tile.vsize} hsize = {tile.hsize} content = {tile.content}/>;
tileSimple( {vsize:  tile.vsize, hsize:  tile.hsize, content:  tile.content});

실제로 렌더링에서 다음 작업을 수행할 수 있습니다.

return this.transferPropsTo(<tileSimple />);

당신이 제안하는 것은

return <tileSimple allTheProps={tile} />;

정상적으로 동작합니다.

내부tileSimple그런 다음 다음과 같은 구문을 사용하여 속성에 액세스할 수 있습니다.

var vsize = this.props.allTheProps.vsize;
var hsize = this.props.allTheProps.hsize;

언급URL : https://stackoverflow.com/questions/20913288/react-js-how-to-pass-properties-object-to-child-component