React中能否在map方法内用来自数据库的state属性渲染组件？

你写的 <{ce.component}/> 语法是错误的，React 不支持这种直接将变量嵌入组件标签的写法，按照你存的内容不同，对应两种解决方案：

情况1：ce.component 存的是 React 组件本身（非字符串） #

React 要求自定义组件名必须首字母大写，你只需要先将变量赋值给一个首字母大写的变量即可使用：

const [post, setPost] = useState([]);

<>
  {post.map((ce) => {
    // 赋值给首字母大写的变量
    const RenderComponent = ce.component;
    return (
      <div key={ce._id}>
        <h2>{ce.title}</h2>
        <p>{ce.content}</p>
        {/* 正常使用组件，也可以按需传props */}
        <RenderComponent />
      </div>
    )
  })}
</>

情况2：ce.component 存的是组件名字符串（比如数据库存的是"Button"、"Card"这类文本） #

不要用eval转换，会有严重的XSS安全风险，提前建立组件映射表即可：

// 提前导入所有可能用到的组件
import Button from './components/Button';
import Card from './components/Card';
import Banner from './components/Banner';

// 建立字符串和组件的映射关系
const ComponentMap = {
  Button,
  Card,
  Banner
}

const [post, setPost] = useState([]);

<>
  {post.map((ce) => {
    const RenderComponent = ComponentMap[ce.component];
    // 匹配不到对应组件时返回空，避免报错
    if (!RenderComponent) return null;
    return (
      <div key={ce._id}>
        <h2>{ce.title}</h2>
        <p>{ce.content}</p>
        <RenderComponent />
      </div>
    )
  })}
</>

额外注意 #

你示例代码里的tittle是拼写错误，正确属性名应该是title。

内容的提问来源于stack exchange，提问作者MR_HACK