将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>

事实上，正如您所看到的，对于标题，您必须使用函数 call FormatterComponent()，而在span元素内您仍然可以使用jsxtag <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，反应进一步使用它来构建html结构。

请记住，标题的函数调用仅在FormatterComponent返回string. 如果它返回另一个 jsx，你也会遇到同样的问题。

很高兴知道：无需 jsx 即可做出反应。