《React+Redux前端开发实战》—2.2.3 render()方法

2.2.3  render()方法

　　render()方法用于渲染虚拟DOM，返回ReactElement类型。

　　元素是React应用的最小单位，用于描述界面展示的内容。很多初学者会将元素与“组件”混淆。其实，元素只是组件的构成，一个元素可以构成一个组件，多个元素也可以构成一个组件。render()方法是一个类组件必须拥有的特性，其返回一个JSX元素，并且外层一定要使用一个单独的元素将所有内容包裹起来。比如：

　　  render() {

　　   return(

　　            <div>a</div>

　　            <div>b</div>

　　            <div>c</div>

　　   )

　　  }

　　上面这样是错误的，外层必须有一个单独的元素去包裹：

　　  render() {

　　   return(

　　       <div>

　　        <div>a</div>

　　        <div>b</div>

　　        <div>c</div>

　　     </div>

　　 )

　　  }

　　1．render()返回元素数组

　　2017年9月，React发布的React 16版本中为render()方法新增了一个“支持返回数组组件”的特性。在React 16版本之后无须将列表项包含在一个额外的元素中了，可以在 render()方法中返回元素数组。需要注意的是，返回的数组跟其他数组一样，需要给数组元素添加一个key来避免key warning。

　　render()方法返回元素数组示例：

　　（源码地址为https://jsfiddle.net/n5u2wwjg/35080/）

　　render() {

　　  return [

　　    <div key="a">a</div>,

　　    <div key="b">b</div>,

　　    <div key="c">c</div>,

　　  ];

　　}

　　除了使用数组包裹多个同级子元素外，还有另外一种写法如下：

　　import React from 'react';

　　export default function () {

　　    return (

　　        <>

　　            <div>a</div>

　　            <div>b</div>

　　            <div>c</div>

　　        </>

　　    );

　　}

　　简写的<></>其实是React 16中React.Fragment的简写形式，不过它对于部分前端工具的支持还不太好，建议使用完整写法，具体如下：

　　import React from 'react';

　　export default function () {

　　    return (

　　        <React.Fragment>

　　            <div>a</div>

　　            <div>b</div>

　　            <div>c</div>

　　        </React.Fragment>

　　    );

　　}

　　最后输出到页面的标签也能达到不可见的效果，也就是在同级元素外层实际上是没有包裹其他元素的，这样能减少DOM元素的嵌套。

　　2．render()返回字符串

　　当然，render()方法也可以返回字符串。

　　render()方法返回字符串示例：

　　（源码地址为https://jsfiddle.net/n5u2wwjg/35079/）

　　render() {

　　 return 'Hello World';

　　}

　　运行程序，界面中将展示以上这段字符串。

　　3．render()方法中的变量与运算符&&

　　render()方法中可以使用变量有条件地渲染要展示的页面。常见做法是通过花括号{}包裹代码，在JSX中嵌入任何表达式，比如逻辑与&&。

　　render()方法中使用运算符示例：

　　const fruits = ['apple', 'orange', 'banana'];

　　function Basket(props) {

　　  const fruitsList = props.fruits;

　　  return (

　　   <div>

　　     <p>I have: </p>

　　         {fruitsList.length > 0 &&

　　           <span>{fruitsList.join(', ')}</span>

　　         }

　　   </div>

　　  )

　　}

　　ReactDOM.render(<Basket fruits={fruits}/>, document.querySelector("#app"))

　　上述代码表示，如果从外部传入Basket组件的数组不为空，也就是表达式左侧为真， &&右侧的元素就会被渲染。展示效果如图2.2所示。如果表达式左侧为false，&&右侧元素就会被React忽略渲染。

　　4．render()方法中的三目运算符

　　在render()方法中还能使用三目运算符condition  true : false。

　　在render()方法中使用三目运算符示例：

　　（源码地址为https://jsfiddle.net/n5u2wwjg/35239/）

　　class App extends React.Component {

　　   constructor(props) {

　　   super(props);

　　        this.state = {

　　         isUserLogin: false

　　        }

　　    }

　　    render() {

　　      const { isUserLogin } = this.state;

　　      return (

　　        <div>

　　          { isUserLogin  <p>已登录</p> : <p>未登录</p> }

　　        </div>

　　      )

　　    }

　　}

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

　　上述代码根据isUserLogin的真和假来动态显示p标签的内容，当然也可以动态展示封装好的组件，例如：

　　return (

　　    <div>

　　        { isUserLogin  <ComponentA /> : <ComponentB /> }

　　    </div>

　　)