React笔记

渲染

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

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

绑定表单数据：

this.addref = React.createRef(),


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


//方式二
//绑定事件

//获取值
inputf(event){
        console.log(event.target.value)
    }

数据传递：

{this.add(this.addref)}}>收藏

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

{this.state.list.map((item,index)=>{item}
                            
                            {this.del(index)}}>删除
                        )}

条件渲染：

this.state.list.length?null:无数据

往数组中添加数据：

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: "111111111"
    }

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 (
            
                this.hlf()}>点击
                
                    
                        {
                            this.state.list.map(item=>{item})
                        }
                    
                
            
        );
    }

    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 写属性


//通过this.props获取属性

    Navbar-this.props.title



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

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

 事件