реакция - передача в массив js-массива в качестве пропеллера, но jsx изменяет его на объект js

Question

Прохождение в необработанном массиве в качестве пропеллера, но он, кажется, модифицируется React/jsx в объект json, который имеет ключи называемые «0», «1» и т. д., соответствующие элементам массива. Это делает невозможным возможность определить, является ли prop на самом деле массивом или единственным компонентом.

Например,

MyComponent имеет:

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

Instantiate MyComponent и передать в массиве:

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

Проблема, в том, что внутри MyComponent, this.props.attachedComponents не является реальным массивом JS - это какой-то объект JS, который имеет ключи «0», «1», каждый корр. esponding к элементу массива, переданного в

Это Nmakes это невозможно для меня, чтобы программно определить, если это был единственный компонент, который был принят в, или если он был фактическим массив, не делая некоторые действительно плохой kludging:.

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, но это не кажется надежным вообще:

Facebook говорит, что this.props.children непрозрачна, и вы должны использовать React.Children API вызовов, все из которых являются добытчиками, что кажется предполагающих, что this.props.children не следует мутировать.

Любые идеи о том, как определить, является ли массив this.props.attachedComponents, не делая по-настоящему плохое клонирование?

Благодаря

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. Но это не так уж и необоснованно.