欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

React 入门 -- 配置 + 组件

程序员文章站 2022-06-13 15:26:04
...

从git clone项目

git clone 项目地址
npm install
npm run mork//模拟数据
npm start//开始

跟着阮一峰老师的教程走

react入门实例教程

入口:
/src/index.js
React 入门 -- 配置 + 组件
引用同级组件时:import PostItem from "../PostItem/PostItem"

prop和state传值的使用

prop – 只读,父子组件间传值

子组件获得父组件的值: const {title,author,date}=this.props;
父组件的写法:<PostItem title={item.title} author={item.author} date={item.date} />

state – 可变,修改state来实现组件状态的变化
class PostItem extends Component{
    constructor(props){
        super(props);//用于完成初始化
        this.state={
            vote:0
        };
    }

    //处理逻辑
    handleClick(){
        let vote=this.state.vote;
        vote++;
        //获取状态
        this.setState({
            vote:vote
        });
    }
    render (){
  		 //
    }
}

React 入门 -- 配置 + 组件
最后还需要提醒大家,只有类组件才具有生命周期方法,函数组件是没有生命周期方法的,因此永远不要在函数组件中使用生命周期方法。

组件样式

React 入门 -- 配置 + 组件
或者

return (
	<h1 style={{width:"100px"}}></h1>

React 入门 -- 配置 + 组件