React笔记

渲染

//引入外部资源
import React from "react"
import ReactDOM from "react-dom"
import App from "./base/base6"

//获取外部JSX
const element = <App></App>;
//获取节点
const root = ReactDOM.createRoot(
    document.getElementById('root')
);
//渲染节点
root.render(element);

绑定表单数据：

this.addref = React.createRef(),
<input ref={this.addref}/>

//获取数据
let values = this.addref.current.value


//方式二
//绑定事件
<input onInput={this.inputf}/>
//获取值
inputf(event){
        console.log(event.target.value)
    }

数据传递：

<button onClick={()=>{this.add(this.addref)}}>收藏</button>

循环渲染（item:数组项；index：数组下标）：

{this.state.list.map((item,index)=><li key={item}>{item}
                            <button className={"butstyle"} onClick={(index)=>
                            {this.del(index)}}>删除</button>
                        </li>)}

条件渲染：

this.state.list.length?null:<div>无数据</div>

往数组中添加数据：

add(ref){
        if (ref){
            this.state.list.push(this.addref.current.value);
            this.addref.current.value = '';
            this.setState({
                list:this.state.list
            })
        }
    }

从数组中删除数据：

del(index){
        let newlist = this.state.list.concat();
        newlist.splice(index,1);
        this.setState({
            list: newlist
        })
    }

插入HTML：dangerouslySetInnerHTML

state = {
        myhtml: "<div>111111111</div>"
    }

<div dangerouslySetInnerHTML={
                    {__html:this.state.myhtml}
                }></div>

axios发起网络请请求：

//用npm install axios --save 安装axios


//请求
axios({
            url:"url",
            method:"GET",
            header:{  
            }

        }).then(res=>{
            console.log(res.data)
        })

数据过滤

//数据过滤
var arr = ["aaa","bbb","ccc"];
var newarr = arr.filter(item=>item.includes("a"))

BetterScroll 滚动插件better-scroll/README_zh-CN.md at master · ustbhuangyi/better-scroll · GitHubhttps://github.com/ustbhuangyi/better-scroll/blob/master/README_zh-CN.md

//安装BetterScroll插件 npm install better-scroll -S

import React, {Component} from 'react';
import BetterScroll from 'better-scroll';
import "./style.css"

class App extends Component {
    state = {
        list:[]
    }
    render() {
        return (
            <div>
                <button onClick={()=>this.hlf()}>点击</button>
                <div className="wrapper">
                    <ul className="content">
                        {
                            this.state.list.map(item=><li key={item}>{item}</li>)
                        }
                    </ul>
                </div>
            </div>
        );
    }

    hlf(){
        var list=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]
//在回调函数中创建BetterScroll实例,传入节点的class名
        this.setState({
            list:list
        },()=>{new BetterScroll('.wrapper')}
            )
    }
}

export default App;

属性传值/默认属性与验证

//在组件上通过key=value 写属性
<Navbar title="1111" show={true} />

//通过this.props获取属性
<div>
    Navbar-this.props.title
</div>


//默认属性
static defaultProps = { myname:"默认的myname", myshow:true }

//属性的类型验证
static propTypes={ myname:propTypes.string, myshow:propTypes.bool }

 事件