如何在超文本标记语言属性中呈现JSX？（获取[对象对象]）

Question

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

但是React正在呈现[对象对象]，而不是在数据工具提示属性中呈现超文本标记语言：

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（）会导致数据工具提示=“[object object]”。

如何在标签属性中插入超文本标记语言？

Answer 1

从技术上讲，既不返回超文本标记语言，也不返回React元素。然而，在第二种情况下，JSX编译器“知道”如何处理元素，而React知道如何将其呈现到DOM中。

我不确定是否可以在标签属性中插入超文本标记语言，但是可以使用renderToString（）从组件生成超文本标记语言。