반응에서 소품으로 사용되는 패싱 배열

반응에서 소품으로 사용되는 패싱 배열

나는 반응하는 것이 처음이야.

리액션 실험을 해 봤는데 소품을 이용한 어레이 통과 방법에 문제가 생겼어.

사례-1:

var c = ['program'];
var Navigation = React.createClass({
    getInitialState: function () {
        return {
            openDropdown: -1
        };
    },
    getDefaultProps: function () {
        return {
            config: ['everyone']
        };
    },
    render: function () {
        return (
            <div className="navigation">
                helloworld {this.props.config[0]};
            </div>
            );
    }
});

React.render(<Navigation config={c}/>, document.body);

헬로월드 프로그램 렌더링이야예상한 대로야

나중에 나는 노력했다.

사례-2:

var c = ['program'];
var Navigation = React.createClass({
    getInitialState: function () {
        return {
            openDropdown: -1
        };
    },
    getDefaultProps: function () {
        return {
            config: ['everyone']
        };
    },
    render: function () {
        return (
            <div className="navigation">
              {this.props.config} helloworld ;
            </div>
            );
    }
});

React.render(<Navigation config="React"/>, document.body);

Ract hellowworld를 렌더링 헬로우월드.propType이 정의되지 않아 예상됨.

다음으로 나는 노력했다.

사례-3 :

var c = ['program'];
var Navigation = React.createClass({
    getInitialState: function () {
        return {
            openDropdown: -1
        };
    },
    getDefaultProps: function () {
        return {
            config: ['everyone']
        };
    },
    render: function () {
        return (
            <div className="navigation">
                helloworld {this.props.config[0]};
            </div>
            );
    }
});

React.render(<Navigation config=['!!!'] />, document.body);

그건 아무것도 렌더링하지 않아.

나중에 내가 그것을 바꾸었을 때React.render(<Navigation config=['!!!'] />, document.body);로React.render(<Navigation config={['!!!']} />, document.body);

지옥세상을 만들었다!!!

나는 JSX가 그들이 외부 변수라는 것을 알 수 있도록 변수에 곱슬곱슬한 교정기를 사용한다는 것을 몇몇 튜토리얼에서 읽은 적이 있다.

그러나 왜 case-3는 호출 중에 어레이가 만들어졌는데도 명시적인 곱슬 교정기를 사용하지 않는 것이며, 문자열은 인라인으로 만들어지는 case-2에서 작동하는가?

곱슬거리는 교정기는 정확히 언제 사용되는가?

그리고 만약 누군가가 나에게 반응에 관한 좋은 책이나 온라인 자습서를 알려줄 수 있다면 그것은 나에게 도움이 될 것이다.

곱슬곱슬한 교정기는 JSX 요소 내에서만 사용하면 된다.다음과 같은 경우:

<MyComponent somProp={['something']} />

위의 경우, 다음 중 하나를 참조하십시오.{}"내가 그 안에서 통과했다는 표현을 평가하여 그것을 소품으로 전달하라"는 말이다.내{}유효한 JavaScript 개체 또는 식을 전달할 수 있다.만약 당신이 끈을 통과한다면, 특히 끈을 위해서, 당신은 곱슬한 교정기가 필요없다는 것을 알아두십시오...맘에 들다<MyComponent somProp="something" />.

위의 코드는 다음과 같다.

var myArray = ['something'];
<MyComponent somProp={myArray} />

실제로 지정하지 않아도 됨PropTypes소품을 사용하기 위해서라면 말이야.개발 중에 프로펠러 타입을 문서화하고 검증하는 좋은 방법일 뿐이다.

현재 사용 중인 데이터{}바르게 {}내면의 표현 값을 반환할 것이다.

하지만 {['everyone']}말이 안 돼여기서는 어레이 내의 요소/값 중 하나가 아니라 어레이 자체의 값을 반환하도록 리액션을 요청하는 경우

어레이에서 첫 번째 값을 얻으려면 다음을 수행해야 한다.{this.props.config[0]}"모두" 값이 배열의 0 색인에 있으므로

배열에 여러 값이 있는 경우 다음 행에 따라 작업을 수행하십시오.

render: function() {
  var values = this.props.config.map(function(value, i){
    return (
      <p>value</p>
    );
  });

  return (
    <div className="navigation">
      helloworld {values};
    </div>
  );
}

어레이 자체에서 특정 값이 아닌 어레이 자체를 실제로 인쇄하려면 다음과 같은 두 가지 옵션을 선택하십시오.

render: function() {
  return (
    <div className="navigation">
      helloworld {this.props.config.toString()};
    </div>
  );
}

아니면

render: function() {
  return (
    <div className="navigation">
      helloworld {JSON.stringify(this.props.config)};
    </div>
  );
}

참조URL: https://stackoverflow.com/questions/31883601/passings-array-as-props-in-reactjs