如何在 HTML 标记属性中呈现 JSX?(获取 [对象对象])

Question

我有一个返回JSX的函数，我需要HTML输出来填充jQueryUI呈现工具提示所需的data-tooltip属性。

但是 React 在 data-tooltip 属性中渲染[object object]而不是 HTML：

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.hello = this.hello.bind(this);
  }
  hello() {
    return (
      <p>Hello</p>
    )
  }
  render() {
    return (
      <div>
        <p data-tooltip={this.hello()}>Hi</p>
        <p>{this.hello()}</p>
      </div>
    )
  }
}

在此示例中，第二个this.hello()工作，并返回 HTML，这证明 hello 函数正确使用 JSX。但是第一次this.hello()通话的结果是data-tooltip="[object object]"。

如何在标签属性中插入 HTML？

Answer 1

从技术上讲，两者都不返回 HTML，而是返回 React 元素。然而，在第二种情况下，JSX 编译器"知道"如何处理元素，而 React 知道如何将其渲染到 DOM 中。

我不确定您是否可以在标签属性中插入 HTML，但您可以使用 renderToString(( 从组件生成 HTML。