반응하지 않는 원시 js 배열을 소품으로 전달하지만 jsx가이를 js 객체로 수정 중

Question

원시 배열을 소품으로 전달하지만 React/jsx에 의해 키가있는 json 객체로 수정 된 것으로 보입니다 배열 원소에 대응하는 "0", "1"등으로 불린다. 따라서 소품이 실제로 배열인지 아니면 단일 구성 요소인지 알 수 없게됩니다. 예를 들어

,

를 MyComponent을 가지고

propTypes: { 
     attachedComponents: React.PropTypes.oneOfType([React.PropTypes.array, React.PropTypes.object]) 
    } 

인스턴스화를 MyComponent 및 배열에 건네

var foo = <Foo /> // my custom component 1 
    var bar = <Bar /> // my custom component 2 
    <MyComponent attachedComponents={[foo, bar]} /> 

문제,를 MyComponent 내부 this.props.attachedComponents이다 은 실제 JS 배열이 아닙니다. - 키가 "0", "1"인 일종의 JS Object입니다. 각 cor 전달 된 배열 요소에 응답

이 불가능 날에, 프로그램이 전달 된 단일 구성 요소 인 경우 결정, 또는 할 수 nmakes는 실제 배열이라면, 정말 나쁜 해결하는데 투입을하지 않고 :.

를 MyComponent : 이후

getInitialState: function() { 
     // this cannot work as intended, because the array passed in is converted into a js object whose typeof is object, not array: 
     if (typeof this.props.attachedComponents !== 'array') { 
      // do code for single component situation 
     } 
    } 

내가 전달 하나의 구성 요소에 대해, Object.keys(this.props.attachedComponents).length 확인 할 수는 Object.keys(this.props.attachedComponents)은 다음과 같습니다

["$$typeof", "type", "key", "ref", "props", "_owner"] 

,

이제 구성 요소 배열을 전달하는 이유가 궁금하면 구성 요소를 프로그래밍 방식으로 추가하려고합니다. 나는 this.props.children을 봐 왔지만,이 신뢰할 수있는 전혀 보이지 않는다 :

페이스 북은 this.props.children가 불투명 말한다, 당신은 것 같다 게터 있습니다 모두 React.Children API 호출, 암시를 사용해야합니다 this.props.children에는을 돌연변이해서는 안됩니다.

this.props.attachedComponents이 배열인지 감지하는 방법에 대한 아이디어는 정말 좋지 않은 kludging을하지 않고 배열입니까?

덕분에

Answer 1

JSX 소품에 아무것도하지 않습니다.

이것은 문자 그대로 문법적 인 설탕으로 React.createElement을 호출하기위한 것입니다. Your code gets converted to :

var foo = React.createElement(Foo, null); // my custom component 1 
var bar = React.createElement(Bar, null); // my custom component 2 
React.createElement(MyComponent, { attachedComponents: [foo, bar] }); 

---

배열 는 객체와 typeof 이상한입니다.typeof someArray 항상 "object" 반환

console.log(typeof []);

배열을 테스트하는 올바른 방법은 사용하는 것입니다 Array.isArray :

console.log(Array.isArray([])); 
 
console.log(Array.isArray({}));

---

내가 this.props.children을 봐 왔지만,이 잘 모든

에서 안정적인하지 않는 것, 그것은 신뢰할 수있다, 그냥 항상 값의 동일한 유형을 반환하지 않습니다. this.props.children을 처리 할 수있는 많은 도우미 함수가 있습니다. React.Children을보십시오. 예 : React.Children.toArray(this.props.children)을 사용하여 값을 실제 배열로 변환 할 수 있습니다.

견적서에서 강조 표시된 부분은 this.props.children 자체의 값을 변경하지 말아야한다는 것을 의미합니다. 그러나 그것은 어떤면에서든 비합리적이지 않습니다.