React 基本使用

react 基本使用

看不懂的请参考官网

1. 需要class 相关的知识
2. 需要了解 JSX
3. 需要了解 this.state
4. 需要了解 render函数
5. 需要了解 JSX中使用js

以下介绍了部分常规使用

import React from 'react';
class Basics01 extends React.Component{

    constructor(props) {
        super(props);
        this.state = {
            name: 'fux',
            imgUrl: 'https://seed.bsdits.cn/img/login_banner.832b1c0a.png',
            flag: true,

            theme:'black',

            list:[
                {
                    id:1,
                    msg:'x1'
                },
                {
                    id:2,
                    msg:'x2'
                },

            ]
        }
    }

    render() {
        ////////////////////////////////// 1. 基础使用
        // // 获取变量 插值
        // const pElem = <p>{this.state.name}</p>
        // return pElem

        // // 表达式
        // const exprElem = <p>{this.state.flag ? 'yes' : 'no'}</p>
        // return exprElem

        // // 子元素
        // const imgElem = <div>
        //     <p>我的头像</p>
        //     <img src="xxxx.png"/>
        //     <img style={{'width':200+'px'}} src={this.state.imgUrl}/>
        // </div>
        // return imgElem

        // // class
        // const classElem = <p className="title">设置 css class</p>
        // return classElem

        // // style
        // const styleData = { fontSize: '30px',  color: 'blue' }
        // const styleElem = <p style={styleData}>设置 style</p>
        // // 内联写法，注意 {{ 和 }}
        // // const styleElem = <p style={{ fontSize: '30px',  color: 'blue' }}>设置 style</p>
        // return styleElem


        // // 原生 html
        // const rawHtml = '<span>富文本内容<i>斜体</i><b>加粗</b></span>'
        // const rawHtmlData = {
        //     __html: rawHtml // 注意，必须是这种格式
        // }
        // const rawHtmlElem = <div>
        //     <p dangerouslySetInnerHTML={rawHtmlData}></p>
        //     <p>{rawHtml}</p>
        // </div>
        // return rawHtmlElem


        // // 加载组件
        // const componentElem = <div>
        //     <p>JSX 中加载一个组件</p>
        //     <hr/>
        //     <List/>
        // </div>
        // return componentElem



        ////////////////////////////////// 2.条件判断
        // const btn1 = <button className='black'>按钮black</button>
        // const btn2 = <button className='white'>按钮white</button>
        //
        // if (this.state.theme === 'black'){
        //     return btn1
        // }else {
        //     return btn2
        // }
        //
        // return <> {this.state.theme === 'black' ? btn1 :btn2}</>
        //
        // return <>{this.state.theme === 'black' && btn1}</>



        ////////////////////////////////// 3.列表渲染
        return (
            <ul>
                {
                    this.state.list.map(v => {
                        return <li key={v.id}>{v.msg}</li>
                    })
                }
            </ul>
        )


    }
}


export default Basics01