像span一样反应渲染数组吗？

Question

I got this inside a component render function return statement:

<div className="well">
   {this.props.someArray}
</div>

Let's say someArray = [1,2] , what I've noticed is React is actually rendering each of the element tags like <span> elements. I thought I was going to get an error.

Is this recommended? Are there any guidelines as to what React does when you pass a raw data structure? I haven't seen any material on this.

Answer 1

When React encounters an element that's an array, it renders each element in that array. How it handles each element depends on what it is:

• React components are rendered using their render() method.
• Strings are wrapped in <span> tags (due to funny behavior of text nodes in the DOM, I believe)
• A nested array is flattened (ie: [1,2,[3,4]] is treated like [1,2,3,4] )
• Other primitive types are converted to strings using .toString() and then treated as above.
• Other types will cause an error