JSX是什么？

大家好，欢迎来到IT知识分享网。

一、JSX是什么？

JSX 是 JavaScript 的扩展语法，这种 <MyButton></MyButton> 标签的写法就是 JSX。JSX 编写的组件通过预处理器 babel 解析后，再交给 React 库渲染到指定父容器下，形成最终html页面。

<MyButton color="blue" shadowSize={2}> Click Me </MyButton> 

上面 jsx 写的组件，被 babel 解析下如下代码：

React.createElement( MyButton, { 
    color: 'blue', shadowSize: 2 }, 'Click Me' ) 

二、JSX的语法及使用方式

1、基本表达

// jsx声明变量 const element = <h1>Hello, world!</h1>; // jsx中设置属性 const element = <div tabIndex="0"></div>; const element = <img src={user.avatarUrl}></img>; const element = <img src={user.avatarUrl} />; // jsx中可以包含多个子元素 const element = ( <div> <h1>Hello!</h1> <h2>Good to see you here.</h2> </div> ); // jsx作为表达式，用在return返回 function getGreeting(user) { if (user) { return <h1>Hello, {formatName(user)}!</h1>; } return <h1>Hello, Stranger.</h1>; } 

2、{}

{} 使得 jsx 可以直接使用 js 语法表达式。

// JSX 中调用 js 函数： function formatName(user) { return user.firstName + ' ' + user.lastName; } const user = { firstName: 'Harper', lastName: 'Perez' }; const element = ( <h1> Hello, {formatName(user)}! </h1> ); // 渲染element元素并加载到父容器root下 ReactDOM.render( element, document.getElementById('root') ); 

# JSX 嵌入 复杂表达式 function NumberList(props) { const numbers = props.numbers; return ( <ul> {numbers.map((number) => <ListItem key={number.toString()} value={number} /> )} </ul> ); } 

3、.

点语法，表示模块中的某一个组件。如下，使用MyComponents模块中的DatePicker组件，点语法非常方便。

import React from 'react'; const MyComponents = { DatePicker: function DatePicker(props) { return <div>Imagine a {props.color} datepicker here.</div>; } } function BlueDatePicker() { return <MyComponents.DatePicker color="blue" />; } 

4、...

用展开运算符 ... 来传递整个 props 对象。以下两个组件是等价的：

function App1() { return <Greeting firstName="Ben" lastName="Hector" />; } function App2() { const props = { firstName: 'Ben', lastName: 'Hector' }; return <Greeting {...props} />; } 

// 用法2：导出需要修改属性kind，其他属性用...来表示 const Button = props => { const { kind, ...other } = props; const className = kind === "primary" ? "PrimaryButton" : "SecondaryButton"; return <button className={className} {...other} />; }; const App = () => { return ( <div> <Button kind="primary" onClick={() => console.log("clicked!")}> Hello World! </Button> </div> ); }; 

5、大写组件

JSX 写的组件名字，必须以大写字母开始。

import React from 'react'; // 正确！组件需要以大写字母开头： function Hello(props) { // 正确！ 这种 <div> 的使用是合法的，因为 div 是一个有效的 HTML 标签： return <div>Hello {props.toWhat}</div>; } function HelloWorld() { // 正确！React 知道 <Hello /> 是一个组件，因为它是大写字母开头的： return <Hello toWhat="World" />; } 

6、大写变量 & 元素

用大写变量SpecificStory 作为元素名称，运行期间根据 props 属性值，决定加载什么组件，非常方便。

import React from 'react'; import { PhotoStory, VideoStory } from './stories'; const components = { photo: PhotoStory, video: VideoStory }; function Story(props) { // 正确！JSX 类型可以是大写字母开头的变量。 const SpecificStory = components[props.storyType]; return <SpecificStory story={props.story} />; } 

7、Props 默认值为 True

// 下面这两句是等价的 <MyTextBox autocomplete /> <MyTextBox autocomplete={true} /> 

8、props.children

props.children 可以表示任意类型的子元素：

// props.children 是一个简单的未转义字符串 "Hello world!" function Welcome(props) { return <p>{props.children}</p>; } <Welcome>Hello world!</Welcome> 

// props.children 表示回调函数: {(index) => <div key={index}>This is item {index} in the list</div>} function Repeat(props) { let items = []; for (let i = 0; i < props.numTimes; i++) { items.push(props.children(i)); } return <div>{items}</div>; } function ListOfTenThings() { return ( <Repeat numTimes={10}> {(index) => <div key={index}>This is item {index} in the list</div>} </Repeat> ); } 

9、其他表达

// 1、只有showHeader 为true时， Header才会被加载渲染 <div> {showHeader && <Header />} <Content /> </div> // 2、即使 props.messages.length 为0，MessageList也会被加载 <div> {props.messages.length && <MessageList messages={props.messages} /> } </div> // 3、上面代码修改如下，可符合预期 <div> {props.messages.length > 0 && <MessageList messages={props.messages} /> } </div> // 4、如下子元素是不会被渲染 <div /> <div></div> <div>{false}</div> <div>{null}</div> <div>{undefined}</div> <div>{true}</div> // 5、只能把他们转为字符串显示 <div> My JavaScript variable is {String(myVariable)}. </div> 

三、用JSX与不用JSX比较

1、使用JSX的组件：

class Hello extends React.Component { 
       render() { 
       return <div>Hello { 
      this.props.toWhat}</div>; } } ReactDOM.render( <Hello toWhat="World" />, document.getElementById('root') ); 

2、不使用JSX的组件：

class Hello extends React.Component { 
       render() { 
       return React.createElement('div', null, `Hello ${ 
        this.props.toWhat}`); } } ReactDOM.render( React.createElement(Hello, { 
       toWhat: 'World' }, null), document.getElementById('root') ); 

四、参考链接：

• JSX是什么？