Dieses Mal werde ich Ihnen die Verwendung der JSX-Syntax in React ausführlich erklären. Was sind die Vorsichtsmaßnahmen bei der Verwendung der JSX-Syntax in React?
Ein spezieller JS-Syntaxzucker, der HTML-Tags als Objekte im Code verwenden kann. Er kann in den folgenden Merkmalen zusammengefasst werden:
wurde früher als HTML-Tag in js verwendet, indem Anführungszeichen als Zeichenfolge hinzugefügt wurden. In der jsx-Syntax müssen jedoch keine Anführungszeichen hinzugefügt werden, und es wird direkt als Objekt
var html = <h1>React</h1>;
Dieser Absatz des HTML-Tags kann normal im Browser analysiert werden.
<input type="text" value="React">
var html = <input type="text" value="React">;
var html = <input type="text" value="React" />; var p = <p>React</p>;
var html = <p> <h1>Tom</h1> <h1>Lucy</h2> </p>
Der folgende Code fügt Kommentare zu den Tags hinzu, sodass ein Fehler gemeldet wird.
var html = <p> <!--不能添加注释，这里会报错--> <h1>Tom</h1> <h1>Lucy</h2> </p>
var name = "DK";
var style = {fontSize: '12px', color: 'red'};
var html = <span style={style}>{name}</span>;<span style="font-size:12px; color:red">DK</span>
<!--React 核心库--> <script src="../../../../libs/react/react.js"></script> <!--React 跟 Dom 相关的功能库--> <script src="../../../../libs/react/react-dom.js"></script> <!--babel 库，将 JSX 语法转为 JavaScript 语法--> <script src="../../../../libs/react/browser.min.js"></script>
<script type="text/bebal"></script>
ReactDOM.render <body>
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>
<!--jsx 语法-->
<script type="text/babel">
//将标签直接渲染到容器 p1 当中
ReactDOM.render(<h1>DK</h1>, document.getElementById('p1'));
var _style = {fontSize: '12px', color: 'red'};
var _name = "Tom";
var _obj = {name: "DK", age: 18};
//标签与 js 代码混写
ReactDOM.render(<h1 style={_style}>{_obj.age + (1 + 2)}</h1>, document.getElementById('p2'));
var array = ["Tom", "Lucy", "Lily"];
//多级标签和 js 代码混写
ReactDOM.render(
<p>
<ul>
{
array.map(function(arg1, arg2){
return <li key={arg2}>{arg1}</li>;
})
}
</ul>
<ul><li>Sam</li></ul>
<ul><li><input type="text" /></li></ul>
</p>,
document.getElementById('p3')
);
</script>
</body>Detaillierte Erläuterung der Schritte zur Verwendung von Schnittstellen in JS
Detaillierte Erläuterung der Implementierungsschritte von VersprechenA+
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung der JSX-Syntax in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
