React Native中RenderHtml组件source属性嵌套对象写法问题

React Native 的 RenderHtml 库要求 source 属性必须是嵌套对象格式，示例如下：

{ html: `<p style='text-align:center;'>Hello World!</p>` };

我在其他页面已成功通过以下方式传递符合要求的对象：

html: { html: route.params.index.content.rendered },

但当前在 map 循环中（无法使用 setState），现有写法如下：

const posts = this.state.data.map((item, index) => (
    <TouchableWithoutFeedback key={index}>
        <RenderHtml source={item.excerpt.rendered} contentWidth={width} />
    </TouchableWithoutFeedback>
  ))

尝试了以下几种写法均无效：

source={html: item.excerpt.rendered}
source={'html:' + item.excerpt.rendered}
source={`{html: item.excerpt.rendered}`}
source={`html: + $item.excerpt.rendered`}

直接将 item.excerpt.rendered 包裹为符合要求的对象即可，正确写法如下：

const posts = this.state.data.map((item, index) => (
    <TouchableWithoutFeedback key={index}>
        <RenderHtml source={{ html: item.excerpt.rendered }} contentWidth={width} />
    </TouchableWithoutFeedback>
  ))

无效写法原因说明 #

• source={html: item.excerpt.rendered}：JSX 中传递对象字面量必须用外层 {} 包裹键值对，此处缺少外层大括号，属于语法错误
• source={'html:' + item.excerpt.rendered}：传递的是拼接后的字符串，而非 RenderHtml 要求的对象格式
• source={{html: item.excerpt.rendered}}：模板字符串生成的是类似对象结构的文本，并非实际的 JavaScript 对象
• source={html: + $item.excerpt.rendered}：模板字符串变量插值语法错误（正确应为 ${item.excerpt.rendered}），且结果仍是字符串，不符合要求

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