简体   繁体   中英

Is it OK to Render an array of components in React 16?

I was informed by a fellow developer that is is considered bad practice to render an array of components in React 16?

Is this so?

Btw, React 16.2 has arrived with Fragments! (don't forget to update both react and react-dom)

return (
 <>
  <El1 />
  <El2 />
  <El3 />
 </>
);

The new thing about arrays in react 16 is that you don't have to wrap them with containing element (on render).

In react 15 you had to:

let data = [
    <li key="1">One</li>,
    <li key="2">Two</li>,
    <li key="3">Three</li>
];
return (<div>{data}</div>);

While in react 16 you can just:

let data = [
    { value: "One", key: "1" },
    { value: "Two", key: "2" },
    { value: "Three", key: "3" }
];
return data.map(item => {
    return (
        <li key={item.key}>
            {item.value}
        </li>
    );
});

Or even simpler:

render() {
    return [
        <li key="A">First item</li>,
        <li key="B">Second item</li>,
        <li key="C">Third item</li>,
    ];
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM