将 React 组件传递给 HTML 属性答案

【问题标题】：Pass React component to HTML attribute将 React 组件传递给 HTML 属性
【发布时间】：2022-03-27 06:46:35
【问题描述】：

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

但我也想做这样的事情：

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

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

谢谢！

【问题讨论】：

您希望title 包含呈现的 HTML 还是什么？这无论如何都行不通（参见jsfiddle.net/gmuvz9xf），title 属性的内容无法格式化。另请参阅Is it possible to format an HTML tooltip (title attribute)?
@FelixKling 在 React 16 中，您可以返回没有包装元素的字符串。见reactjs.org/blog/2017/09/26/…
我知道。但是 a) 实例化一个反应组件仍然不同于调用一个函数并返回一个字符串。评估 <FormatterComponent value={someValue} /> 不会产生字符串。它产生一个 React 元素（它是一个对象）。 b）你不能“风格”标题属性。这与 React 无关，这就是 HTML 的工作原理。现在，也许您对“格式”的意思有所不同。在这种情况下：您的组件是否返回字符串并不重要。您不能将 React 组件用作 HTML 属性的值。
问题是我希望将格式化功能捆绑在一个地方，并且有多个选项来呈现内容。我希望能够返回带有一些包装器和样式的格式化结果，也可以作为纯文本返回，并将其用作title 或其他属性。但如果这不可能，那么我需要以某种方式对其进行分解，并为纯字符串提供单独的格式化服务。
如果你想要在同一个类中的所有逻辑，你可以在FormatterComponent 上有一个返回字符串的静态方法。例如。 FormatterComponent.format(someValue).

标签： javascript reactjs

【解决方案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。

【讨论】：