for & 条件渲染 | dangerHTML

循环渲染 for

    render() {
        return (
            <div>
                <ul>
                    {
                        this.state.list.map( (item,index)=>
                            <li key={index}>{item.text}--{index}</li>
                        )
                    }
                </ul>
            </div>
        )
    }

条件渲染

import React, { Component } from 'react'
import Film from './maizuocomponent/Film'
import Cinema from './maizuocomponent/Cinema'
import Center from './maizuocomponent/Center'

export default class App extends Component {
    which(){
        switch (this.state.current){
            case 0:
                return <Film></Film>
            case 1:
                return <Cinema></Cinema>
            case 2:
                return <Center></Center>

            default:
                return null
        }
    }

    render() {
        return (
            <div>
                {/* {//每个组件写一个判断语句
                    this.state.current===0 && <Film></Film>
                }
                {
                    this.state.current===1 && <Cinema></Cinema>
                }
                {
                    this.state.current===2 && <Center></Center>
                } */}

                {
                    //也可以是表达式--支持函数表达式
                    this.which()
                }
            </div>)
    }
}

富文本 - dangerouslySetInnerHTML

    render() {
        return (
            <div>
                <div dangerouslySetInnerHTML={
                    {
                        __html:this.state.myhtml
                    }
                }></div>
            </div>
        )
    }