blocks|key|4625307|text|你可以用dangerouslySetInnerHTML，例如|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4625308|render:+function()+{
++++return+(
++++++++<div+className="content"+dangerouslySetInnerHTML={{__html:+thisIsMyCopy}}></div>
++++);
}|code-block|syntax|javascript|4625309|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/19266197/reactjs-convert-to-html^0|4|N|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>You can use <a href="https://stackoverflow.com/questions/19266197/reactjs-convert-to-html">dangerouslySetInnerHTML</a>, e.g.</p>

<pre><code>render: function() {
    return (
        &lt;div className="content" dangerouslySetInnerHTML={{__html: thisIsMyCopy}}&gt;&lt;/div&gt;
    );
}
</code></pre>


blocks|key|4625339|text|+dangerouslySetInnerHTML有很多缺点，因为它设置在标记中。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4625340|我建议你使用一些react包装器，就像我在npm上找到的一样。html-react-parser也做同样的工作。|4625341|import+Parser+from+'html-react-parser';
var+thisIsMyCopy+=+'<p>copy+copy+copy+<strong>strong+copy</strong></p>';


render:+function()+{
++++return+(
++++++++<div+className="content">{Parser(thisIsMyCopy)}</div>
++++);
}|code-block|syntax|javascript|4625342|非常简单:)|4625343|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/19266197/reactjs-convert-to-html|1|https://www.npmjs.com/package/html-react-parser^0|0|O|0|0|V|H|1|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|F|3|G|5|H|7|14|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|15|8|@]|9|@]|C|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|V]]]]

<p><a href="https://stackoverflow.com/questions/19266197/reactjs-convert-to-html"> dangerouslySetInnerHTML</a> has many disadvantage because it set inside the tag. </p>

<p>I suggest you to use some react wrapper like i found one here on npm for this purpose.
<a href="https://www.npmjs.com/package/html-react-parser" rel="noreferrer">html-react-parser</a> does the same job.</p>

<pre><code>import Parser from 'html-react-parser';
var thisIsMyCopy = '&lt;p&gt;copy copy copy &lt;strong&gt;strong copy&lt;/strong&gt;&lt;/p&gt;';


render: function() {
    return (
        &lt;div className="content"&gt;{Parser(thisIsMyCopy)}&lt;/div&gt;
    );
}
</code></pre>

<p>Very Simple :)</p>


blocks|key|4625436|text|通过使用''，您可以将其转换为字符串。使用时不使用反逗号，它可以很好地工作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4625437|const+span+=+<span>+whatever+your+string+</span>

const+dynamicString+=+"Hehe";
const+dynamicStringSpan+=+<span>+{`${dynamicString}`}+</span>

render+()+{
++return+(
++++<div>

++++++{span}

++++++{dynamicStringSpan}

++++</div>
++);
}|code-block|syntax|javascript|4625438|entityMap^0|4|2|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>By using <code>''</code> you are making it to a string. Use without inverted commas it will work fine.</p>
<pre><code>const span = &lt;span&gt; whatever your string &lt;/span&gt;

const dynamicString = &quot;Hehe&quot;;
const dynamicStringSpan = &lt;span&gt; {`${dynamicString}`} &lt;/span&gt;

render () {
  return (
    &lt;div&gt;

      {span}

      {dynamicStringSpan}

    &lt;/div&gt;
  );
}
</code></pre>


blocks|key|119595|text|为了避免linter错误，我这样使用它：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|119596|++render()+{
++++const+props+=+{
++++++dangerouslySetInnerHTML:+{+__html:+'<br/>'+},
++++};
++++return+(
++++++++<div+{...props}></div>
++++);
++}|code-block|syntax|javascript|119597|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>To avoid linter errors, I use it like this:</p>

<pre><code>  render() {
    const props = {
      dangerouslySetInnerHTML: { __html: '&lt;br/&gt;' },
    };
    return (
        &lt;div {...props}&gt;&lt;/div&gt;
    );
  }
</code></pre>


blocks|key|4625509|text|你不需要任何特殊的库或者“危险”属性。您可以只使用React引用来操作DOM：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4625510|class+MyComponent+extends+React.Component+{
++++
++++constructor(props)+{
++++++++
++++++++super(props);+++++++
++++++++this.divRef+=+React.createRef();
++++++++this.myHTML+=+"<p>Hello+World!</p>"
++++}
++++
++++componentDidMount()+{
++++++++
++++++++this.divRef.current.innerHTML+=+this.myHTML;
++++}
++++
++++render()+{
++++++++
++++++++return+(
++++++++++++
++++++++++++<div+ref={this.divRef}></div>
++++++++);
++++}
}|code-block|syntax|javascript|4625511|可以在以下位置找到工作示例：|4625512|https://codepen.io/bemipefe/pen/mdEjaMK|offset|length|4625513|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|13|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|V|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|W|8|@]|9|@$K|X|L|Y|1|Z]]|A|$]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|J]]]]

<p>You don't need any special library or &quot;dangerous&quot; attribute. You can just use React Refs to manipulate the DOM:</p>
<pre><code>class MyComponent extends React.Component {
    
    constructor(props) {
        
        super(props);       
        this.divRef = React.createRef();
        this.myHTML = &quot;&lt;p&gt;Hello World!&lt;/p&gt;&quot;
    }
    
    componentDidMount() {
        
        this.divRef.current.innerHTML = this.myHTML;
    }
    
    render() {
        
        return (
            
            &lt;div ref={this.divRef}&gt;&lt;/div&gt;
        );
    }
}
</code></pre>
<p>A working sample can be found here:</p>
<p><a href="https://codepen.io/bemipefe/pen/mdEjaMK" rel="noreferrer">https://codepen.io/bemipefe/pen/mdEjaMK</a></p>


blocks|key|4625497|text|在React版本16.0及更高版本中，如果您不需要上述任何功能，请尝试<Fragment>。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4625498|在你的情况下，我们可以写|4625499|import+React,+{useState,+Fragment}+from+'react'

const+thisIsMyCopy+=+Fragment('<p>copy+copy+copy+<strong>strong+copy</strong></p>')

render:+function()+{
++++return+(
++++++++<div+className="content">{thisIsMyCopy}</div>
++++);
}|code-block|syntax|javascript|4625500|如果您使用钩子，希望将其设置为具有任何条件的某个状态|4625501|const+[thisIsMyCopy,+setThisIsMyCopy]+=+useState(<Fragment><p>copy+copy+copy+<strong>strong+copy</strong></p></Fragment>);|4625502|entityMap^0|Z|A|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|X|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|R|$]]

<p>In React version 16.0 and later, try <code>&lt;Fragment&gt;</code>, if you don't want any of above.</p>
<p>In your case, we can write</p>
<pre><code>import React, {useState, Fragment} from 'react'

const thisIsMyCopy = Fragment('&lt;p&gt;copy copy copy &lt;strong&gt;strong copy&lt;/strong&gt;&lt;/p&gt;')

render: function() {
    return (
        &lt;div className=&quot;content&quot;&gt;{thisIsMyCopy}&lt;/div&gt;
    );
}
</code></pre>
<p>If you using hook want to set it in a state somewhere with any condition</p>
<pre><code>const [thisIsMyCopy, setThisIsMyCopy] = useState(&lt;Fragment&gt;&lt;p&gt;copy copy copy &lt;strong&gt;strong copy&lt;/strong&gt;&lt;/p&gt;&lt;/Fragment&gt;);
</code></pre>


blocks|key|119517|text|如果还有其他人在这里着陆的话。使用ES6，您可以创建html变量，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|119518|render(){
++++var+thisIsMyCopy+=+(
++++++++<p>copy+copy+copy+<strong>strong+copy</strong></p>
++++);
++++return(
++++++++<div>
++++++++++++{thisIsMyCopy}
++++++++</div>
++++)
}|code-block|syntax|javascript|119519|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>If anyone else still lands here. With ES6 you can create your html variable like so: </p>

<pre><code>render(){
    var thisIsMyCopy = (
        &lt;p&gt;copy copy copy &lt;strong&gt;strong copy&lt;/strong&gt;&lt;/p&gt;
    );
    return(
        &lt;div&gt;
            {thisIsMyCopy}
        &lt;/div&gt;
    )
}
</code></pre>


blocks|key|4625402|text|您也可以像这样在ReactDOM中包含这个超文本标记语言：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4625403|var+thisIsMyCopy+=+(<p>copy+copy+copy+<strong>strong+copy</strong></p>);

ReactDOM.render(<div+className="content">{thisIsMyCopy}</div>,+document.getElementById('app'));|code-block|syntax|javascript|4625404|这里有两个来自React文档的link和link2链接，它们可能会有所帮助。|offset|length|4625405|entityMap|0|LINK|mutability|MUTABLE|url|https://reactjs.org/docs/introducing-jsx.html|1|https://reactjs.org/docs/rendering-elements.html^0|0|0|F|4|0|K|5|1|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@$I|X|J|Y|1|Z]|$I|10|J|11|1|12]]|A|$]]|$1|K|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]|S|$5|N|O|P|A|$Q|T]]]]

<p>You can also include this HTML in ReactDOM like this:</p>

<pre><code>var thisIsMyCopy = (&lt;p&gt;copy copy copy &lt;strong&gt;strong copy&lt;/strong&gt;&lt;/p&gt;);

ReactDOM.render(&lt;div className="content"&gt;{thisIsMyCopy}&lt;/div&gt;, document.getElementById('app'));
</code></pre>

<p>Here are two links <a href="https://reactjs.org/docs/introducing-jsx.html" rel="nofollow noreferrer">link</a> and <a href="https://reactjs.org/docs/rendering-elements.html" rel="nofollow noreferrer">link2</a> from React documentation which could be helpful.</p>


<p>I am building something with React where I need to insert HTML with React Variables in JSX. Is there a way to have a variable like so:</p>

<pre><code>var thisIsMyCopy = '&lt;p&gt;copy copy copy &lt;strong&gt;strong copy&lt;/strong&gt;&lt;/p&gt;';
</code></pre>

<p>and to insert it into react like so, and have it work?</p>

<pre><code>render: function() {
    return (
        &lt;div className="content"&gt;{thisIsMyCopy}&lt;/div&gt;
    );
}
</code></pre>

<p>and have it insert the HTML as expected? I haven't seen or heard anything about a react function that could do this inline, or a method of parsing things that would allow this to work.</p>


Insert HTML with React Variable Statements (JSX)

我正在用React构建一些东西，其中我需要在JSX中插入带有React变量的HTML。有没有一种方法可以让变量像这样：var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';像这样把它插入到react中，然后让它工作？render: function() {    return (        <div cl

问使用React变量语句插入HTML (JSX)
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用React变量语句插入HTML (JSX)EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用React变量语句插入HTML (JSX)
EN