react
lannieZ
这个作者很懒,什么都没留下…
展开
-
React 组件通讯的三种方式
一、父组件传递数据给子组件 1、父组件提供要传递的state数据 2、给子组件标签添加属性,值为state中的数据 3、子组件提供props接收父组件传递的数据 代码如下: class Parent extends React.Component { constructor(props) { super(props) this.state = { ...原创 2019-11-04 00:03:36 · 426 阅读 · 0 评论 -
props的基本使用和特点
组件的props( props是一个对象 ) 作用:接收传递给组件的数据 特点:1、可以给组件传递任意类型的数据 2、props是只读的对象,只能读取属性的值,无法修改对象 3、注意:使用类组件时,如果写了构造函数,应该将props传递给super(),否则,无法在构造函数中获取到props!!! 代码如下: class One extends React.Component { cons...原创 2019-11-03 22:43:57 · 4452 阅读 · 1 评论 -
React 组件的两种创建方式
1、使用函数创建组件 函数组件:使用JS的函数(或箭头函数)创建的组件 约定1:函数名称必须以大写字母开头 约定2:函数组件必须有返回值,表示该组件的结构 如果返回值为null,表示不渲染任何内容 const Component = () => <div>哈罗啊</div> 或者 function Component () { return <div&g...原创 2019-11-02 16:07:28 · 113 阅读 · 0 评论 -
react 改变this指向问题
1、利用箭头函数自身不绑定this的特点 <button onClick={()=>this.add()}>+1</button> 2、Function.prototype.bind() class One extends React.Component { constructor() { super() this.add =...原创 2019-11-02 16:01:08 · 151 阅读 · 0 评论 -
react脚手架
React脚手架意义 脚手架是开发现代Web应用的必备 充分利用 Webpack,Babel,ESLint等工具辅助项目开发 零配置,无需手动配置繁琐的工具即可使用 关注业务,而不是工具配置 使用React脚手架初始化项目 npx 目的:提升包内提供的命令行工具的使用体验 原来:先安装脚手架包,再使用这个包中提供的命令 现在:无需安装脚手架包,就可以直接使用这个包提供的命令 create-r...原创 2019-10-16 17:42:19 · 175 阅读 · 0 评论 -
react的基本使用
React的安装 npm i react react-dom eact 包是核心,提供创建元素,组件等功能 react-dom 包提供DOM相关功能 React的使用 引入react和react-dom的两个js文件 <script src="./node_modules/react/umd/react.development.js"></script> <sc...原创 2019-10-16 16:40:53 · 117 阅读 · 0 评论