javascript - 将 React 组件传递给 HTML 属性

Question

升级到 React 16.0.0 后，我现在可以有效的 React 组件返回简单的字符串，而无需任何包装器元素。

但我也想做这样的事情:

<span title={<FormatterComponent value={someValue} />}>
    Some text text
</span>

我想在 title 中得到一个格式化的字符串属性，但我得到 [object Object]那里。你能帮我完成这项工作吗？

谢谢!

Answer 1

您将获得 [object Object]因为 jsx标签，与您认为的不同。
一、解决你的问题，只要FormatterComponent是一个函数组件，您可以在此处将其用作常规函数。

function FormatterComponent(props) {
  return props.value;
}

export default function App() {
  return (
    <span title={FormatterComponent({ value: "someValue" })}>
      <FormatterComponent value={"someOtherValue"} />
    </span>
  );
}

这将导致:

<span title="someValue">someOtherValue</span>

事实上，正如你所看到的，对于标题，你必须使用函数调用 FormatterComponent() , 而在 span您仍然可以使用 jsx 的元素标签 <FormatterComponent /> .
原因是浏览器无法使用 jsx .所以它必须通过 babel 进行转译首先，它会变成这个丑陋的 js .

...
function App() {
  return /*#__PURE__*/React.createElement("span", {
    title: FormatterComponent({
      value: "someValue"
    })
  }, /*#__PURE__*/React.createElement(FormatterComponent, {
    value: "someOtherValue"
  }));
}

如您所见，转译后的事件，对于标题，函数调用仍然存在，这仍将导致 string .但是 jsx变成了这样:

 React.createElement(FormatterComponent, {
        value: "someOtherValue"
  }));`

结果是 object , 进一步被 react 用来构建 html结构体。
请记住，标题的函数调用仅在 FormatterComponent 时有效。正在返回 string .如果它返回另一个 jsx，您将遇到同样的问题。
很高兴知道: react without jsx .