在 React 中渲染数组/对象

Question

I have a code that works but I don't understand why I am returning an array of react components and they are still rendering in the page... how does this work?

render() {
        const boxes = Array.from({ length: this.props.numBoxes }).map(() => (
            <Box colors={this.props.allColors} />
        ));

        console.log(boxes);

        return <div className='BoxContainer'>{boxes}</div>;

Answer 1

Each XML-like JSX tag is actually an object. As you can probably see in your console.log an array of objects, which React's internals use to render, monitor and update the components. So simply <div className="boxContainer"></div> is an object in which's properties also contains it's children.

On the other hand, boxes results to an array of objects; you can replace {boxes} with:

{<Box colors={this.props.allColors} />
<Box colors={this.props.allColors} />
<Box colors={this.props.allColors} />
...
<Box colors={this.props.allColors} />
<Box colors={this.props.allColors} />}

for JSX {boxes} means put everything in boxes variable in the place I put {boxes} with two curly braces surrounding it.

You can suppose boxes is equivalent to:

<Box colors={this.props.allColors} />
<Box colors={this.props.allColors} />
<Box colors={this.props.allColors} />
...
<Box colors={this.props.allColors} />
<Box colors={this.props.allColors} />