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

Question

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

我正在使用 dangerouslySetInnerHTML 但是 JSX 以某种方式被视为 HTML。我有 JSX 格式的 className = "test" ......所以，当呈现它时，它有 HTML 测试类（红色背景）

React 组件尝试将 JSX 字符串注入其他 JSX 代码

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

  }

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

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

浏览器检查器查看渲染代码

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

Answer 1

所以也许我迟到了一两年，但我怀疑dangerouslySetInnerHTML 期望的不是 JSX 字符串，而是 HTML 字符串。

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>

`innerJSX` 而不是 `innerHTML`

如果您绝对必须设置 innerJSX 而您似乎没有设置，您可以使用 babel 进行设置，但根据您使用的是 node 还是 browser js，方法会有所不同。

NodeJS：您需要 @babel/core 和 @babel/plugin-transform-react-jsx 来实现这一点，React with webpack 将支持这一点。

let parseJSX = (function() {
  let babel = require("@babel/core");
  return function(str) {
    let code = babel.transformSync(str, {
      plugins: ["@babel/plugin-transform-react-jsx"]
    }).code;
    return eval(code);
  }
})()

浏览器：这是指仅浏览器内的 ReactJS。为此，您还需要 babel。

// Assuming babel is already loaded.
function parseJSX(str) {
  return eval(
    Babel.transform(str, 
      {
        presets: [],
        plugins: ["transform-react-jsx"]
      }
    ).code
  )
}

测试

浏览器

// Browser Version (Babel is loaded)
function parseJSX(str) {
  return eval(
    Babel.transform(str, 
      {
        presets: [],
        plugins: ["transform-react-jsx"]
      }
    ).code
  )
}

class App extends React.Component {
  createMarkup() {
    var jsxString = '<div className="test">TESTING</div>'; // className as in JSX
    return parseJSX(jsxString);
  }

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


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

由于通过dangerouslySetInnerHTML 传递的内容应该是 HTML 并且它没有被 React 解析，因此 className 属性不会被解析为 class，内容必须遵循添加属性的 HTML 约定必须看起来喜欢

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>
      );   
  }