React 入门 -- 配置 + 组件
程序员文章站
2022-06-13 15:26:04
...
从git clone项目
git clone 项目地址
npm install
npm run mork//模拟数据
npm start//开始
跟着阮一峰老师的教程走
入口:
/src/index.js
引用同级组件时: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 (){
//
}
}
最后还需要提醒大家,只有类组件才具有生命周期方法,函数组件是没有生命周期方法的,因此永远不要在函数组件中使用生命周期方法。
组件样式
或者
return (
<h1 style={{width:"100px"}}></h1>
下一篇: 【SpringBoot】-之日志配置