React 中嵌套对象无法直接作为 ReactNode 渲染的解决方案-js教程-PHP中文网

当在 JSX 中尝试直接渲染一个普通 JavaScript 对象（如 { one: "...", two: "...", three: "..." }）时，TypeScript 会报错 “Type '...' is not assignable to type 'ReactNode'”，因为 React 不支持自动序列化对象为 DOM 内容。

当在 jsx 中尝试直接渲染一个普通 javascript 对象（如 `{ one: "...", two: "...", three: "..." }`）时，typescript 会报错 “type '...' is not assignable to type 'react node'”，因为 react 不支持自动序列化对象为 dom 内容。

该错误的根本原因在于：React 要求所有插入到 JSX 中的表达式必须能被解析为有效的 ReactNode —— 即字符串、数字、JSX 元素、数组、null、undefined 或 Fragment，而不能是纯对象（如 { one: "...", two: "..." }）。你当前代码中 {feature} 的 feature 是一个对象，React 无法将其“变成 HTML”，因此触发类型检查失败。

✅ 正确做法是显式访问对象的每个属性，并分别渲染：

X-Node企业快速建站1.0.6.0801

特色介绍： 1、ASP+XML+XSLT开发，代码、界面、样式全分离，可快速开发 2、支持语言包，支持多模板，ASP文件中无任何HTML or 中文 3、无限级分类，无限级菜单，自由排序 4、自定义版头（用于不规则页面） 5、自动查找无用的上传文件与空目录，并有回收站，可删除、还原、永久删除 6、增强的Cache管理，可单独管理单个Cache 7、以内存和XML做为Cache，兼顾性能与消耗 8、

下载

const pricingCard = prices.map(({ name, price, features }) => (
  <div key="{name}" classname="pricing-card">
    <h3 classname="text-xl font-bold">{name}</h3>
    <p classname="text-2xl font-semibold">{price}</p>

    <ul classname="mt-6 space-y-4">
      {features.map((feature, idx) => (
        <li key="{idx}" classname="flex items-start space-x-3">
          <svg classname="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400 mt-0.5" fill="currentColor" viewbox="0 0 20 20"><path fillrule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" cliprule="evenodd"></path></svg><div>
            <ul classname="space-y-1">
<li>{feature.one}</li>
              <li>{feature.two}</li>
              <li>{feature.three}</li>
            </ul>
</div>
        </li>
      ))}
    </ul>
</div>
));

⚠️ 注意事项：

每个 map 回调必须返回有效的 JSX（推荐使用 () 包裹以隐式返回，或显式 return）；
列表项（如 features.map）需提供唯一 key，此处使用索引 idx 可行（因 features 数组结构稳定且无动态增删）；若未来可能重排或增删，建议改用更稳定的标识符；
避免直接 {feature} 或 {JSON.stringify(feature)} 渲染——前者类型错误，后者虽可显示但语义混乱、可访问性差、不利于 SEO 和屏幕阅读器；
若 features 数组将来可能含多个对象（如不同套餐功能差异），可进一步解构为 ...feature 或结合 Object.values(feature) 动态渲染，但需确保顺序与 UI 语义一致。

总结：React 不会也不应猜测如何展示对象——开发者必须明确指定每个字段的呈现方式。保持数据结构清晰、渲染逻辑显式，既是 TypeScript 类型安全的要求，也是构建可维护 UI 的最佳实践。