和我一起实战react之JSX_html/css

来源：懂视网责编：小采时间：2020-11-27 16:40:01

和我一起实战react之JSX_html/css

和我一起实战react之JSX_html/css_WEB-ITnose:JSX 我们知道React使用一颗DOM对象树来描述文档，如果它是普通的对象，会是怎样？ var element = { tagName: 'div', props: { id: 'div', className: 'container' }, children: [ { tagName: 'div', props: { id

推荐度：

点击下载本文 文档为doc格式

导读和我一起实战react之JSX_html/css_WEB-ITnose:JSX 我们知道React使用一颗DOM对象树来描述文档，如果它是普通的对象，会是怎样？ var element = { tagName: 'div', props: { id: 'div', className: 'container' }, children: [ { tagName: 'div', props: { id

JSX

我们知道React使用一颗DOM对象树来描述文档，如果它是普通的对象，会是怎样？

var element = { tagName: 'div', props: { id: 'div', className: 'container' }, children: [ { tagName: 'div', props: { id: 'div1', className: 'header' }, children: [...{element}] }, { tagName: 'div', props: { id: 'div2', className: 'content' }, children: [...{element}] }, { tagName: 'div', props: { id: 'div3', className: 'footer' }, children: [...{element}] } ]}

对应的 HTML：

JSX给予的方式正好相反，通过书写这样类似 HTML结构，通过transformer工具将其转换成了对象，且让我们看一个不借助 JSX的写法实现上面的结构。

React.createElement( 'div', { className: 'container'}, React.createElement( 'div', { className: 'header'} ), React.createElement( 'div', { className: 'content'} ), React.createElement( 'div', { className: 'footer'} ));

开始使用JSX

在今后的编程实践中期望大家使用JSX来书写React组件

利用JSX我们现在可以像写 HTML一样来书写React组件，某些情况下在属性中你还需要注意 JavaScript的保留字，比如class属性要写成className，for需要写成htmlFor。 JSX对于大小写是敏感的，小写属于HTML标签，大写则是React组件。

使用 JSX书写一个简单的组件：

import React from 'react';import { render } from 'react-dom';function Hello (props){ const { className, children } = props; return ( { children } );}render((  Hello World ),document.getElementById('app'))

表达式

在 JSX中 {}用来表示一个 JavaScript表达式，你可以在这里进行求值逻辑或者赋值，赋值且可看上述的Hello例子，只需要 { children }。

且看我们已经实现的 Dialog根据不同的 type类型来呈现不同的子组件。

好的写法是将逻辑判断写在return之前（good）：

import Alert from './Alert';import Confirm from './Confirm';class Dialog extends React.Component { render (){ const { type } = this.props; const Component = type === 'alert' ? Alert : Confirm; return (   
 ); }}

当然你也可以直接将表达式写在return里面（这个写法非常不好 bad）：

import Alert from './Alert';import Confirm from './Confirm';class Dialog extends React.Component { render (){ const { type } = this.props; return (  { type === 'alert' ? :  } 
 ); }}