保安日记：React框架学习第二篇_react parentnode-CSDN博客

本文链接：https://blog.csdn.net/Zhuo_De/article/details/109518283

Props

父传递给子组件数据，单向流动，不能子传递给父。

props的传值，可以是任意的类型。

Props可以设置默认值

HelloMessage.defaultProps = {  name:”老陈”，msg：“helloworld”  }

**注意：**props可以传递函数，props可以传递父元素的函数，就可以去修改父元素的state,从而达到传递数据给父元素。

父传子数据传递案例


class ParentNode extends React.Component{
    constructor(props){
        super(props)
        this.state ={
            isActive:true
        }
        this.changeShow=this.changeShow.bind(this)
    }

    render(){
        return(
            <div>
                <button onClick = {this.changeShow}>切换					</button>
                <ChildNode isActive = {this.state.isActive} />
            </div>
        )
    }
    changeShow(){
        this.setState ({
            isActive:!this.state.isActive
        })
    }
}

class ChildNode extends React.Component{
    constructor(props){
        super(props)
    }

    render(){
        let strClass = null
        strClass = this.props.isActive? 'active' :''
        return(
            <div className ={strClass}>
                <h1>我是子元素</h1>
            </div>
        )
    }
}

ReactDOM.render( <ParentNode />,
        document.querySelector("#root"))

React数据传递：子传父

调用父元素的函数从而操作父元素的数据，从而实现数据从子元素传递至父元素


class ParentNode extends React.Component{
    constructor(props){
        super(props)
        this.state ={
            childData:''
        }
    }

    render(){
        return(
            <div>
                <h1>子传父的数据 {this.state.childData}</h1>
                <ChildNode setChildData ={this.setChildData} />  
            </div>
            
        )
    }
    setChildData =(data)=>{
        this.setState({
            childData:data
        })
    }
}

class ChildNode extends React.Component{
    constructor(props){
        super(props)
        this.state ={
            msg:'hello,world'
        }
        // this.sendData = this.sendData.bind(this)
    }

    render(){
        return(
           <div>
               <button onClick={this.sendData}>传递参数					   </button>
           </div>
        )
    }
    sendData =()=>{
        // 将子元素传递给父元素，实际就是调用父元素传递进来的父元素函数
        this.props.setChildData(this.state.msg)
    }
}

ReactDOM.render( <ParentNode />,
        document.querySelector("#root"))

React 事件

事件对象：React返回的事件对象是代理的原生的事件对象，如果想要查看事件对象的具体值，必须之间输出事件对象的属性。

注意：

原生，阻止默认行为时，可以直接返回return false；

React中，阻止默认必须e.preventDefault();

class ParentNode extends Component{
    constructor(props){
        super(props)
    }

    render(){
        return(
            <div>
                <form action="http://www.baidu.com">
                    <button onClick={this.preventEvent}></button>
                </form>
            </div>
        )
    }
    preventEvent=(e)=>{
        //return false ---不能阻止页面跳转
        e.preventDefault()
    }
}

React事件传参数

 {/* 使用ES6箭头函数传递多个参数 */}
                    <button  onClick={(e)=>{this.parentEvent1('msg:helloworld',e)}}>
                        提交
                    </button>
                    {/* //不使用ES6箭头函数传递多个参数的方式 */}
                    <button  onClick={function(e){this.parentEvent1('不使用es6,msg:helloworld',e)}.bind(this)}>
                        提交
                    </button>

React 条件渲染

React中条件渲染即和JavaScript中，条件运算，如if…else…三元运算符等。

直接通过条件运算返回要渲染的JSX对象
通过条件运算得出jsx对象，在将JSX对象渲染到模板中。

案例一：

import React from 'react';
import ReactDOM from 'react-dom';

function UserGreet(props){
    return (<h1>欢迎登陆</h1>)
}

function UserLogin(props){
    return (<h1>请先登录</h1>)
}

class ParentCom extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            isLogin:false
        }
    }
    render(){
        let element = null;
        if(this.state.isLogin){
            element = <UserGreet></UserGreet>;
        }else{
            element = (<UserLogin></UserLogin>);
        }

        

        return (
            <div>
                <h1>这是头部</h1>
                {element}
                <h1>这是三元运算符的操作</h1>
                {this.state.isLogin?<UserGreet></UserGreet>:<UserLogin></UserLogin>}
                <h1>这是尾部</h1>
            </div>
        )
    }
}

ReactDOM.render(
    <ParentCom></ParentCom>,
    document.querySelector('#root')
)

React 列表渲染

将列表内容拼装成数组放置到模板中。将数据拼装成数组的JSX对象。

使用数组的map方法，对每一项数据按照JSX的形式进行加工，最终得到1个每一项都是JSX对象的数组，在将数组渲染到模板中。

Key值需要放置到每一项中

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

function ListItem(props){
    return(
        <li >
                    <h3>{props.index+1}:{props.data.title}</h3>
                    <p>{props.data.content}</p>
        </li>
    )
}
class ListItem2 extends Component{
    constructor(props){
        super(props)
    }

    render(){
        return(
            <li onClick={(e)=>{this.clickEvent(
                this.props.index,
                this.props.data.title,
                e)}}>
                <h3>{this.props.index+1}:{this.props.data.title}</h3>
                <p>{this.props.data.content}</p>
            </li>
        )
    }
    clickEvent = (index,title,event)=>{
        alert((index+1)+' & '+title)
    }
}

class Welcome extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            list:[
                {
                    title:"第一节 React事件",
                    content:"事件内容"
                },
                {
                    title:"第二节 React数据传递",
                    content:"数据传递内容",
                },
                {
                    title:"第三节 条件渲染",
                    content:"条件渲染内容",
                }
            ]
        }
    }

    render(){
        let listArr = this.state.list.map((item,index)=>{
            return(
                <ListItem2 key={index} data={item} index={index}></ListItem2>
                
            )
        })
        console.log(listArr);

        return (
            <div>
                <h1>
                    今天课程内容
                </h1>

                <ul>
                    {listArr}
                    <li>
                        <h3>这是标题</h3>
                        <p>内容</p>
                    </li>
                </ul>

            </div>
        )
    }
}

ReactDOM.render(
    <Welcome></Welcome>,
    document.querySelector('#root')
)

//疫情数据集合
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import jsonData from './feiyan.json'
import './App.css'

let provincesObj = {}

jsonData.data.list.forEach((item,i)=>{
    if(provincesObj[item.province] == undefined){
        provincesObj[item.province] ={
            confirm:0 ,
            heal:0,
            dead:0
        }
    }
    item.confirm = item.confirm?item.confirm:0;
    item.heal = item.heal?item.heal:0;
    item.dead = item.dead?item.dead:0;

    provincesObj[item.province] = {
        confirm:provincesObj[item.province].confirm + item.confirm,
        heal:provincesObj[item.province].heal + item.heal,
        dead:provincesObj[item.province].dead + item.dead
    }
})
// console.log(provincesObj);
let provinceList = [];
for (const key in provincesObj) {
    provincesObj[key].province = key
    provinceList.push (provincesObj[key])
}
console.log(provinceList);

//排序 sort 如果返回值大于0 则调换位置 如果小于0则不变
let provinceListSort = provinceList.sort((a,b)=>{
    if(a.confirm < b.confirm){
        return 1
    }else{
        return -1
    }
})
console.log(provinceListSort);

class Bingli extends React.Component{
    constructor(props){
        super(props)
    }

    render(){
        return(
            <div>
                <ul>
                    <li>
                        <span>省份</span>
                        <span>确诊</span>
                        <span>治愈</span>
                        <span>死亡</span>
                    </li>

                    {
                        this.props.list.map((item,index)=>{
                            return(
                                <li>
                                    <span>{item.province}</span>
                                    <span>{item.confirm}</span> 
                                    <span>{item.heal}</span> 
                                    <span>{item.dead}</span>
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
        )
    }
}
ReactDOM.render(<Bingli list={provinceListSort}></Bingli>,document.querySelector('#root'))