javascript - JS/React 函数返回字符串属性但返回 [object Object]

Question

我有这个功能:

const getNameListMarkdown = (props: Props) => {
  if (isDefined(props.details)) {
    return (
      Object.keys(props.details).map(x => <p>{props.details![x].name}</p>)
    );
  }

  return '';
};

出于某种原因，当我尝试渲染它时，它会渲染为 [object Object], [object Object]，例如，如果列表中有两个对象。如果我通过控制台记录 Object.keys ，它会在 .name 空间中写出应有的字符串。所以它应该返回一个字符串，但它不会这样渲染。如果我检查调用此函数的地方返回的内容，它会收到一个 vNode 对象，可以在子数组中看到该字符串。有谁知道如何正确执行此操作？

Answer 1

<p>{props.details![x].name}</p>是 JSX 。当它被评估时，你会得到一个React element (这是一个对象)，而不是 HTML 字符串。

同时，Array.prototype.map给你一个数组。所以你最终得到一个包含两个对象的数组。

当您调用(直接或隐式).toString()时在数组上，您会得到一个由数组的每个成员组成的字符串(因此两个 "[object Object]" s)

<小时/>

如果您想要一个字符串，请使用模板文字而不是 JSX:

.map(x => `<p>${props.details![x].name}</p>`)