html 标签在 jsx 制作的标签中不起作用

Question

我一直在 keystone.js 项目中使用包 express-react-views，因此我正在静态生成我的视图。但是，当放在我制作的自定义组件中时，本机 HTML 标记似乎不起作用。

假设我有以下内容：

office.name = name
office.address = lorem ipsum
office.contactInfo.phone = 123
office.contactInfo.fax = 456

如果我呈现以下内容：

<Stub textPosition="right" title={"Office / " + office.name}>
    {office.address}
    <small>Tel: {office.contactInfo.phone}</small>
    <br />
    <small>Fax: {office.contactInfo.fax}</small>
</Stub>

它的渲染有点像这样：

NAME
lorem.ipsum
,[object Object],[object Object],[object Object]

在我看来，这三个标签变成了对象。

我做错了什么？谢谢！

Answer 1

正如我在评论中所写，您的 {office.contactInfo.fax} 是对象，但现在是一个文本字段。我不确定那里还有哪些其他字段/属性，但要在 html 中显示某些内容，您应该从该传真对象中提取文本字段。 例如：

> fax = {'fax_home': '12345', 'fax_work': '6789'}
> Object {fax_home: "12345", fax_work: "6789"}
> typeof(fax)
> "object"
> fax['fax_home']
> "12345"

您还可以遍历对象中的键以提取您需要的内容。 （这在反应中也是可能的）。只是 JS：

fax = {'fax_home': '12345', 'fax_work': '6789'}
Object.keys(fax).forEach(function (key) {
   console.log(fax[key]);
});