将JSX作为字符串变量嵌入到React JS中的其他JSX代码中

Question

我有JSX代码，但它在一个字符串中。试图将该代码注入React组件中的其他JSX中，但遇到了问题。。。

我使用的是危险的HTML，但是JSX被当作HTML处理。我有JSX格式的className=“test”。。。因此，当呈现时，它具有HTML测试类（红色背景）

  createMarkup(){  
    var htmlString = '<div className="test">TESTING</div>';
    return {__html : htmlString}

  }

  render() {
     return (
        <div id="pageContent" className="container" dangerouslySetInnerHTML={this.createMarkup()}></div>
      );   
  }

它正在插入字符串变量，但是当你检查它时，输出是这样的：（你可以看到外部div的类名称现在是类，但是插入的字符串仍然被视为类名称

<div id="pageContent" class="container"><div classname="test">TESTING</div></div>

Answer 1

所以也许我晚了一两年，但是，我怀疑危险的SetInnerHTML期望的不是JSX字符串，而是超文本标记语言字符串。

class App extends React.Component {
  createMarkup() {
    var htmlString = '<div class="test">TESTING</div>'; // class instead of className
    return { __html: htmlString };
  }

  render() {
    return (
      <div
        id="pageContent"
        className="container"
        dangerouslySetInnerHTML={this.createMarkup()}
      />
    );
  }
}


let main = document.getElementById("main");
ReactDOM.render(<App />, main);

console.log("The innerHTML of `#main` is:")
console.log(main.innerHTML)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="main"></div>

Answer 2

由于通过传递的内容是危险的SetInnerHTML预期为超文本标记语言，并且它不会被React解析，因此class Name属性不会被解析为class，因此内容必须遵循添加属性的超文本标记语言约定一定看起来像

createMarkup(){  
    var htmlString = '<div class="test">TESTING</div>';
    return {__html : htmlString}

  }

  render() {
     return (
        <div id="pageContent" className="container" dangerouslySetInnerHTML={this.createMarkup()}></div>
      );   
  }

然而，你可以这样写

  createMarkup(){  
    return <div className="test">TESTING</div>
  }

  render() {
     return (
        <div id="pageContent" className="container">{this.createMarkup()}</div>
      );   
  }