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

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

我正在使用危险的LysetinerHTML，但是JSX不知何故被视为HTML。我有JSX格式的className=“test”。。。因此，当呈现时，它具有HTML测试类（红色背景）

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

createMarkup（）{
var htmlString=‘测试’；
返回{uuu html:htmlString}
}
render（）{
返回(
);   
}

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

浏览器检查器查看呈现的代码

测试

由于通过

危险的SetinenerHTML

传递的内容应为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（）{
var htmlString=‘测试’；
返回{uuu html:htmlString}
}
render（）{
返回(
);   
}

然而，你可以这样写

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

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

createMarkup（）{
回归测试
}
render（）{
返回(
{this.createMarkup（）}
);   
}

因此，也许我晚了一两年，但我怀疑

危险的是，setinenerHTML

期望的不是JSX字符串，而是HTML字符串

类应用程序扩展了React.Component{
createMarkup（）{
var htmlString='TESTING'；//类而不是类名
返回{uuuhtml:htmlString}；
}
render（）{
返回(
);
}
}
让main=document.getElementById（“main”）；
render（，main）；
log（“main的innerHTML是：”）
console.log（main.innerHTML）

那么我该如何传递JSX呢？我需要它是JSX（在某些情况下，该字符串中有组件）您宁愿将它们呈现为div的子级，而不是使用

DangerlySetinerHTML

，但这并不能解决这个字符串问题。我仍然会将子级作为字符串传递，而React不会将字符串解析为JSX为什么要将子级作为字符串传递真正的问题是为什么JSX表示为字符串？

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