JSX

Mr.Liu大约 3 分钟

JSX

JSX(JavaScript XML) 是 JS 的一个语法扩展，既不是字符串也不是HTML，编写方式和HTML标签类似，由 JS 解析，不通过浏览器解析。
浏览器不认识 JSX 语法，需要 babel.js 提供支持。
babel 地址：https://unpkg.com/babel-standalone@6.26.0/babel.min.js
在 JS 中使用 JSX 时需要引入 babel 进行转换，同时需要配置类型 type=“text/babel”

要将 React 元素渲染到根 DOM 节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上：

<style>
.foo{
	color:red;
}
</style>
</head>
<body>
	<div id="root"></div>
	<script type="text/babel">
	const element = <h1 className="foo">Hello, world</h1>;
	const root = ReactDOM.createRoot(document.getElementById("root"));
	root.render(element);
	</script>
</body>

提示

由于 JSX 就是 JavaScript，一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代，React DOM 使用 className 和 htmlFor 来做对应的属性。

使用JSX

可以在以上代码中嵌套多个 HTML 标签，需要使用一个 div 元素包裹它，实例中的 p 元素添加了自定义属性 data-myattribute，添加自定义属性需要使用 data- 前缀。

<div id="root"></div>
<script type="text/babel">
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <div>
    <h1>自学教程</h1>
    <h2>欢迎学习 React</h2>
    <p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
    </div>
);
</script>

##　独立文件你的 React JSX 代码可以放在一个独立文件上，例如我们创建一个 helloworld_react.js 文件，代码如下：

const element = <h1 className="foo">Hello, world</h1>;
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(element);

然后在 HTML 文件中引入该 JS 文件：

<body>
  <div id="example"></div>
    <script type="text/babel" src="helloworld_react.js"></script>
</body>

JavaScript 表达式

可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。实例如下：

<div id="root"></div>
<script type="text/babel">
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <div>
        <h1>{1+1}</h1>
    </div>
);
</script>

打印结果：2

在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代。以下实例中如果变量 i 等于 1 浏览器将输出 true, 如果修改 i 的值，则会输出 false.

<div id="root"></div>
<script type="text/babel">
    var i = 1;
    
    const root = ReactDOM.createRoot(document.getElementById("root"));
    root.render(
        <div>
            <h1>{i == 1 ? 'True!' : 'False'}</h1>
        </div>
    );
</script>

打印结果：True!

样式

React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px 。以下实例演示了为 h1 元素添加 myStyle 内联样式：

<div id="root"></div>
<script type="text/babel">
    var myStyle = {
        fontSize: 100,
        color: '#FF0000'
    };
    const root = ReactDOM.createRoot(document.getElementById("root"));
    root.render(
        <h1 style = {myStyle}>自学教程</h1>,
        document.getElementById('example')
    );
</script>

注释

注释需要写在花括号中，实例如下：

<div id="root"></div>
<script type="text/babel">
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <div>
    <h1>自学教程</h1>
    {/*注释...*/}
    </div>
);
</script>

数组

JSX 允许在模板中插入数组，数组会自动展开所有成员：

<div id="root"></div>
<script type="text/babel">
var arr = [
  <h1>自学教程</h1>,
  <h2>学的不仅是技术，更是梦想！</h2>,
];
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <div>{arr}</div>
);
</script>

打印如下：

自学教程学的不仅是技术，更是梦想！