React 中数据渲染（条件、列表）

一、条件渲染

根据不同条件显示不同结果

import React ,{ Component,Fragment } from 'react'

class Condition extends Component {

   //通过不同状态控制dom元素的显示内容
   constructor(){
      super()
      this.state={
         flag:false,//定义一个开关
      }
   }
 
   handleClick = () => {
      this.setState({
         flag : !this.state.flag,
      })
   }

   render(){
      return (
         <Fragment>
            <h3>条件渲染</h3>
            {/* 通过按钮点击事件控制状态 */}
            <button onClick = {this.handleClick} >点击收藏</button>
            
            {/* 通过开关的状态显示不同值 */}
            <p> {this.state.flag ? '❤️取消' : '?收藏'} </p>

            {/* 另外一种写法，利用短路逻辑 */}
            <p> { this.state.flag && '❤️取消' || '?收藏' } </p>

         </Fragment>
      )
   }
}

export default Condition;

二、列表渲染

• 列表基础渲染

import React ,{ Component ,Fragment } from 'react';

class List extends Component {

   constructor () {
      super ()
      this.state = {
        todos: [
            {
               id:1,
               name:'张三',
               interest:'打球'
            },
            {
               id:2,
               name:"李四",
               interest:"打游戏",
            },
            {
               id:3,
               name:"王五",
               interest:"弹吉他"
            }
         ]
      }
   }
   render() {
      const todos = this.state.todos;
      return (
      <Fragment>
         <h3>列表渲染</h3>
         <ul>
            { todos.map ( todo => {
               return (
                  <li key= {todo.id}> 姓名： {todo.name} ------兴趣：{ todo.interest } </li>
               )
            }) }
         </ul>
      </Fragment>
      )
   }
}

export default List ;

• 列表标准渲染 (通过定义无状态组件来实现 ）

import React ,{ Component ,Fragment } from 'react';


//定义无状态组件，函数组件
const Item = ( props ) => {
   console.log( props)
  return <li> 姓名：{props.name}<br/>兴趣：{props.interest} </li>
};

class List extends Component {

   constructor () {
      super ()
      this.state = {
        todos: [
            {
               id:1,
               name:'张三',
               interest:'打球'
            },
            {
               id:2,
               name:"李四",
               interest:"打游戏",
            },
            {
               id:3,
               name:"王五",
               interest:"弹吉他"
            }
         ]
      }
   }

   //定义一个函数，将组件数据渲染出来
  DataReandering = () => {
   //   return this.state.todos.map ( todo => {
   //      return <Item key = {todo.id }  {...todo}></Item>
   //   } )

   //可以简化为
      return this.state.todos.map( todo => <Item key = { todo.id } {...todo} ></Item> )
  }

   render() {
      return (
      <Fragment>
         <h3>列表渲染</h3>
         <ul>
            { this.DataReandering() }
         </ul>
      </Fragment>
      )
   }
}

export default List ;