JSX 是什么?
JSX,全称为 JavaScript XML,是一种类似 HTML 的语法扩展,它可以让我们在 JavaScript 代码中编写类似 XML 的结构。JSX 并不是合法的 JavaScript 代码,但是我们可以 transpilers(如 Babel) 编译成可以被浏览器理解的代码。
如何定义元素 (Elements)
在使用 JSX 时,我们可以直接在 JavaScript 代码中编写 HTML 标签或自定义标签,这些标签被称为元素。例如,在 JSX 中创建一个 div 元素,我们只需要像这样写代码:
const element = <div>This is a React element.</div>;
元素渲染
在 React 中,我们通过 ReactDOM 提供的 render() 方法来将元素渲染到页面上。我们首先需要在 HTML 页面中准备好容纳 React 组件的元素(即 mountNode),然后将要渲染的组件传给 ReactDOM.render() 方法进行渲染。
例如,在 HTML 页面中有一个 id 为 “root” 的空 div 节点,我们可以将组件渲染到这个节点上:
<div id="root"></div>
在 JavaScript 的代码中,通过调用 render() 方法实现渲染:
const element = <h1>Hello, World!</h1>;
ReactDOM.render(element, document.getElementById('root'));
最终效果就是在 id 为 “root” 的节点下面插入了一个 h1 元素,内容是 “Hello, World!”。
元素属性 (Props) 是什么?
元素属性(Props)是我们向组件传递数据的方式之一,也是开发 React 应用必须掌握的基础知识之一。它是一个包含属性和值的对象,我们可以在组件定义时声明组件所接收到的属性类型和默认值。在组件内部使用 props 拿到传递过来的数据,在组件的 return 语句里渲染出来。
例如,我们可以在定义组件时设置一个名为 “name” 的 props 属性:
function Greeting(props) {
return <div>Hello, {
props.name}!</div>;
}
const element = <Greeting name="React" />;
ReactDOM.render(element, document.getElementById('root'));
在上面的示例中,我们定义了一个"姓名"