《React+Redux前端开发实战》—1.4.3 JSX的用法

1.4.3  JSX的用法

　　在React中，可以使用花括号{}把JavaScript表达式放入其中运行，放入{}中的代码会被当作JavaScript代码进行处理。

　　1．JSX嵌套

　　定义标签时，最外层只允许有一个标签，例如：

　　const MessageList = () =>(

　　 <div>

　　    <div>Hello React!</div>

　　      <ul>

　　       <li>List1</li>

　　            <li>List2</li>

　　            <li>List2</li>

　　      </ul>

　　 </div>

　　)

　　假如写成以下这样：

　　const MessageList = () =>(

　　 <div>

　　    <div>Hello React!</div>

　　      <ul>

　　       <li>List1</li>

　　            <li>List2</li>

　　            <li>List2</li>

　　      </ul>

　　     </div>

　　   <div>

　　    ...

　　   </div>

　　)

　　进行程序后会报错，无法通过编译，控制台报错如图1.9所示。

图1.9  Babel报错

注意：由于JSX的特性接近JavaScript而非HTML，所以ReactDOM使用小驼峰命名（camelVase）来定义属性名。例如，class应该写为className。

　　2．属性表达式

　　在传统写法中，属性这样写：

　　<div id="test-id">…</div>

　　JSX中也实现了同样的写法，比如：

　　const element = <div id="test-id" className="test-class"></div>

　　                                                                            // 注意class写为className

　　同时还支持JavaScript动态设置属性值，比如：

　　// 注意class写为className

　　const element = <div id={this.state.testId} className={this.state.testClass}> </div>;

　　const element = <img src={user.avatarUrl}></img>;

　　对于复杂情景，还可以直接在属性内运行一个JavaScript函数，把函数返回值赋值给属性，比如：

　　const element = <img src={this.getImgUrl()}></img>;

　　这样，每当状态改变时，返回值会被渲染到真实元素的属性中。

　　3．注释

　　JSX语法中的注释沿用JavaScript的注释方法，唯一需要注意的是，在一个组件的子元素位置使用注释需要用{}括起来。例如：

　　class App extends React.Component {

　　  render() {

　　    return (

　　    <div>

　　      {/* 注释内容 */}

　　      <p>Hi, man</p>

　　    </div>

　　    )

　　  }

　　}

　　4．Boolean属性

　　Boolean的属性值，JSX语法中默认为true。要识别为false就需要使用{}，这类标签常出现在表单元素中，如disable、checked和readOnly等。例如：

　　<checkbox checked />等价于<checkbox checked={true} />，但要让checked为false，必须这么写：<checkbox checked={false} />。

　　5．条件判断

　　在JavaScript中可以使用判断条件的真假来判断对DOM节点进行动态显示或选择性显示。通常，在HTML中处理这样的问题比较麻烦，但对于JavaScript而言则轻而易举，这给开发者带来了极大的方便。本书主要介绍3种条件判断，分别是三目运算符、逻辑与（&&）运算符和函数表达式。

　　三目运算符示例：

　　class App extends React.Component { 

　　  constructor(){

　　    super();

　　    this.state={

　　      visible: false

　　    }

　　  }

　　  render() {

　　    return (

　　    <div>

　　      {

　　        this.state.visible  <span>visible为真</span> : <span>visible为真</span>

　　      }

　　    </div>

　　    )

　　  }

　　}

　　ReactDOM.render(<App />, document.querySelector("#app"))

　　代码运行结果如图1.10所示。

　　逻辑与（&&）运算符示例：

　　class App extends React.Component { 

　　  constructor(){

　　    super();

　　    this.state={

　　      visible: false

　　    }

　　  }

　　  render() {

　　    return (

　　    <div>

　　      {

　　       !this.state.visible && <span>visible为真</span>

　　      }

　　    </div>

　　    )

　　  }

　　}

　　ReactDOM.render(<App />, document.querySelector("#app"))

　　代码运行结果，如图1.11所示。

       图1.10  三目运算符示例显示文本       图1.11  逻辑与(&&)运算符示例显示文本

　　函数表达式示例：

　　style样式：

　　.red{

　　  color: red;

　　}

　　.blue{

　　  color: blue;

　　}

　　JSX：用JSX语法定义一个名为App的组件，用于在页面中渲染一个div节点。

　　class App extends React.Component { 

　　  constructor(){

　　    super();

　　    this.state={

　　      isRed: true

　　    }

　　  }

　　  getClassName(){

　　 return this.state.isRed"red":"blue"

　　  }

　　  render() {

　　    return (

　　    <div className={this.getClassName()}>

　　      Hello React!

　　    </div>

　　    )

　　  }

　　}

　　ReactDOM.render(<App />, document.querySelector("#app"))

　　运行代码，显示效果如图1.12所示。

　　6．非DOM属性

　　在React中还有几个特殊的属性是HTML所没有的：

•  key（键）；

•  refs（引用）；

•  dangerouslySetInnerHTML。

　　下面简单介绍它们的作用。

　　（1）key（键）：是一个可选的唯一标识符。比如有一组列表，当对它们进行增加或删除操作时，会导致列表重新渲染。当这组列表属性中拥有一个独一无二的key属性值之后就可以高性能地渲染页面。后面6.1节的diff算法中会详细分析该属性。示例用法如下：

　　const todoItems = todos.map((todo) =>

　　  <li key={todo.id}>

　　    {todo.text}

　　  </li>

　　);

　　（2）refs（引用ref）：任何组件都可以附加这个属性，该属性可以是字符串或回调函数。当refs是一个回调函数时，函数接收底层DOM元素或实例作为参数。这样就可以直接访问这个DOM或组件的节点了。但此时获取到的不是真实的DOM，而是React用来创建真实DOM的描述对象。写法如下：

　　<input ref="myInput" />

　　然后就可以通过this.refs.myInput去访问DOM或组件的节点了。

　　refs适用的场景有处理焦点、文本选择、媒体控制、触发强制动画和集成第三方DOM库等。需要注意的是，官方并不推荐使用这个属性，除非“迫不得已”。

注意：无状态组件不支持ref。在React调用无状态组件之前没有实例化的过程，因此就没有所谓的ref。

　　（3）dangerouslySetInnerHTML：这算是React中的一个冷知识，它接收一个对象，可以通过字符串形式的HTML来正常显示。

　　<div dangerouslySetInnerHTML={{__html: '<span>First &middot;  Second </span>'}} />

　　上面这段代码将在页面中显示First · Second。

　　通过这种方式还可以避免cross-site scripting（XSS）攻击。这里不展开对XSS的介绍，读者可根据兴趣自行了解。

　　7．样式属性

　　样式（style）属性接收一个JavaScript对象，用于改变DOM的样式。

　　JSX中的样式示例：

　　let styles = {

　　 fontSize: "14px",

　　 color: "#red"

　　}

　　function AppComponent() {

　　 return <div style={styles}>Hello World!</div>

　　}