如何将 JSX 存储在变量中？

Question

This outputs correctly, works as JSX, highlights the field as expected.

var result = "the text";
renderResults[2].props.children.props.listing.title = <span className="highlight"> {result} </span>;

This one, however, does not. It displays as a string with the html tags:

var result = "the text";
var finalResult = <span className="highlight"> {result} </span>;
renderResults[2].props.children.props.listing.title = finalResult;

How do I get the second to pass as JSX and not a string?

Answer 1

您的类属性缺少结束语

var finalResult = <span className="highlight"> {result} </span>;

Answer 2

You didn't close className, maybe that is the reason why it doesn't work.

className="highlight"

Answer 3

There is a small typo on your code, you are missing a " after className="highlight>

A working example:

 const Demo = () => { const result = "the text"; const finalResult = <span className="highlight"> {result} </span>; return finalResult; } ReactDOM.render(<Demo/>, document.getElementById('demo'))

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.0/umd/react-dom.production.min.js"></script> <div id="demo"></div>

Answer 4

Correct me if I'm mistaken, but as mentioned per docs here

By default, React DOM escapes any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that's not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent XSS (cross-site-scripting) attacks.

So it assumes that your variable is user input or something malicious and escapes it before using it's content, while in the second example, you're explicitly assigning JSX to a variable so it works.