如何在HTML标记属性中呈现JSX？ （获取[对象]）

Question

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

但是React正在[object object]属性中呈现data-tooltip而不是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编译器知道＆＃39;如何处理元素，React知道如何将它呈现到DOM中。

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