时间戳

首页 > 解决方案 > 可以多次渲染 React 元素吗？

javascript - 可以多次渲染 React 元素吗？

问题描述

假设我有一个渲染 5 个图标的功能组件。

这可以这样做：

export default const Icons = () =>
    <div>
        <Icon/>
        <Icon/>
        <Icon/>
        <Icon/>
        <Icon/>
    </div>;

但也可以这样做：

const icon = <Icon/>;

export default const Icons = () =>
    <div>
        {icon}
        {icon}
        {icon}
        {icon}
        {icon}
    <div/>;

不同之处在于，在第二种情况下，只有一个 React 元素是使用React.createElement.

是否不鼓励多次渲染 React 元素？

如果是这样，那是为什么？如果没有，通过多次渲染 React 元素是否有任何性能或尺寸优势？

标签： javascriptreactjs

解决方案

没关系。您还可以映射一些数据数组，您可以使用这些数据作为道具传递给您的组件。

const altTags = ['me', 'dog', 'cat'];
const icon = <Icon/>;    
export default const Icons = () =>
        <div>
           {this.altTags.map(tag => <Icon alt={tag} />)}
        </div>;

推荐阅读