如何设置innerHTML jsx格式

Question

所以我给出了这段代码：

render() {
  console.log(this.props, 'ey');
  const var1 = "<div className={{blahblah}} style={{width: '10px'}}>{textvar}</div>"


  return (
    <div dangerouslySetInnerHTML={{ __html: `${var1}` }}>
    </div>
  );
}

当然，这只是一个例子，但是var1应该是jsx格式的html文件的很大一部分，但是这样做会使它们按原样呈现，并且不会将它们转换为常规html。

我也尝试通过componentDidMount上的refs设置innerHTML，但同样的问题也会发生。

这是它呈现时的外观：

<div class="blahblah style="width: 10px"}}>the variable text</div>

任何帮助将不胜感激。谢谢！

Answer 1

您需要执行此操作以使用ES6插值字符串文字（在规范中不正确地称为模板文字）：

<div dangerouslySetInnerHTML={{ __html: `${var1}` }}>

但这会更简单：

<div dangerouslySetInnerHTML={{ __html: var1 }}>

但是，在内部html的字符串中，如果要使用blahblahand textvar变量的值，则可能需要使用插值字符串文字。注意，您需要使用class而不是className因为React只会设置内部html而不是将其视为JSX，className并且仅用于JSX。

const var1 = `<div class=${blahblah}>${textvar}</div>`;

如果使用的是类，则无需也使用style关键字。只需在CSS中设置宽度即可。

您可以在CodePen上看到上述示例的工作示例。