如何在JavaScript对象中使用JSX？解决显示e=mc[object Object]问题

你遇到的问题根源在于：JSX本质是React.createElement()的调用结果，是一个JavaScript对象，当你把它放进模板字符串${}里时，JS会自动调用这个对象的toString()方法，最终得到[object Object]，所以才会出现e=mc[object Object]的错误显示。

下面是两种正确的实现方式：

方法一：直接用JSX片段作为message的值 #

把message定义成JSX元素（用<>空片段包裹多元素），渲染时直接输出这个JSX即可：

const anyThing = [
    {
        id: 1,
        username: "alberteinstein1879",
        message: <>e=mc<sup>2</sup></>
    }
]

在React组件里渲染时，写{item.message}就能正确显示带上标的公式。

方法二：用数组组合字符串和JSX元素 #

如果需要拆分字符串与JSX部分，可以用数组存储，React会自动遍历数组并渲染每个元素（注意给JSX元素加唯一key）：

const anyThing = [
    {
        id: 1,
        username: "alberteinstein1879",
        message: ["e=mc", <sup key="sup-2">2</sup>]
    }
]

渲染时同样用{item.message}，就能得到正确的e=mc²效果。

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