反應危險SetInnerHTML打印出'[object Object]'

Question

我有我的元素：

dangerouslySetInnerHTML: { __html: this.props.html.map(React.renderToStaticMarkup).join('') }

this.props.html是一個 React 元素數組（由這個方法構建）：

makeOutput(model) {
    return <Key model={model} />;
}

當我在斷點中運行上面的代碼時，我得到：

> this.props.html.map(React.renderToStaticMarkup).join('')
> "<span>b</span>"

但是，當元素輸出到 DOM 時，顯示的只是[object Object] 。 這有什么原因嗎？

Answer 1

這個例子表明該技術沒有問題：

function makeOutput(text) {
  return <Wrapper text={text} />;
}

var Wrapper = React.createClass({
  render() {
    return <div>Wrapping: {this.props.text}</div>
  }
});

var App = React.createClass({
  render() {
    var items = [
      makeOutput("one"),
      makeOutput("two"),
      makeOutput("three")
    ];
    return (
      <div dangerouslySetInnerHTML={{__html: items.map(React.renderToStaticMarkup).join("") }} />
    );
  }
});

React.render(<App />, document.getElementById("container"));

問題一定出在一些你還沒有透露的代碼上。

Answer 2

嘗試將您的 HTML 轉換為字符串類型

// before
const content = <p>Hello</p>

// after update
const content = `<p>Hello</p>`

// implementation
<div dangerouslySetInnerHTML={{ __html: content }} />