children dangerouslySetInnerHTML

children

• 组件标签对之间的内容会被当做一个特殊的属性 props.children 传入组件内容

• 可以自定义结构的组件的常用形式

  • children
  • 传递函数
  • 传递子组件

  代码演示

import React, { PureComponent, } from 'react';

class Popwindows extends PureComponent {
    state = {
        close: false //不关
    }
    render() {
        let { close } = this.state;
        let { children } = this.props;
        return ( < div style = {
                {
                    display: close ? "none" : "block"
                }
            } > { children } <
            button onClick = {
                () => {
                    this.setState({
                        close: true
                    })
                }
            } > 关闭 < /button> < /
            div > )
    }
}

class App extends PureComponent {

    state = {
        show: false, //显示内容 点击关闭  false的话浏览器是空白
        man: false
    }

    render() {
        let { show, man } = this.state;
        return ( <
            div > {
                show ? ( < Popwindows >
                    <
                    h1 > 希望你快乐 < /h1> <
                    p > 冬天最好 < /p> < /
                    Popwindows > ) : ""
            }

            {
                man ? ( < Popwindows >
                    <
                    h1 > 春天快乐快乐 < /h1> <
                    p > 冬天最好 < /p> < /
                    Popwindows > ) : ""
            }

            <
            button onClick = {
                () => {
                    this.setState({ show: true })
                }
            } > 显示弹框 < /button>  <
            button onClick = {
                () => {
                    this.setState({ man: true })
                }
            } > 夏天 < /button> <
            /
            div >

        )
    }
}

export default App;

dangerouslySetInnerHTML

• 直接设置标签的 innerHTML（这个是作为后端应用）

import React, { PureComponent, } from 'react';

// class Popwindows extends PureComponent {

// }
let massage = `<
h1 > 希望你快乐 < /h1> <
p > 冬天最好 < /p>`;

class App extends PureComponent {

    render() {
        return ( <
            div dangerouslySetInnerHTML = {
                {
                    __html: massage
                }
            } >

            <
            /div>
        )
    }

}

export default App;