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 interpolated string literals（规范中不正确地称为模板文字）：

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

但这会更简单：

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

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

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

如果您正在使用类，则无需使用style关键字。只需在CSS中设置宽度。

您可以看到working example of the above on CodePen。

如何设置innerHTML jsx格式

1 个答案: