2020年05月_大名张无忌

原创 React小书中得CommentList的需求实现

*原文：评论功能划分成四种组件，CommentApp、CommentInput、CommentList、Comment。CommentApp：评论功能的整体用一个叫 CommentApp 的组件包含起来。CommentApp 包含上部和下部两部分。*所有的数据以state形式存在APP里，因为Input和List都要用到。CommentInput：上面部分是负责用户输入可操作的输入区域，包括输入评论的用户名、评论内容和发布按钮，这一部分功能划分到一个单独的组件 CommentInput 中.

2020-05-24 16:08:15 517

原创 React渲染列表并修改其中某项数据

功能：一个Persons组件列表，有3个人，每个人有name和age两个属性。有一个input框，输入值时对应的任的age发生变化。知识点：1、因为每个Person中会有复用代码，如render的return值，所以抽象成一个函数组件；2、函数组件与类组件：函数组件—无状态组件，没法使用state。更简单，其中没有this，接受参数返回值即可，无构造函数更多见：https://www.jianshu.com/p/e220ef5b0e093、函数组件与高阶组件：函数：传入一些参数，返回DOM元.

2020-05-18 22:47:59 2872

原创 React小书没提到但是很有用的基础知识

ReactDom.render渲染多个元素时需要包裹起来，但是不一定用div，也可以用其他的1、<>yuan<>2、ul等

2020-05-18 21:34:45 151

原创 Count计数器更新state值

class Count extends Component { constructor() { super() this.state = { num: 0 } } addNum() { console.log(this); if (this.state.num < 10) { this.setState((prevState) => { return { num: prevState.num + 1 }

2020-05-17 21:17:48 245

原创 React中的ref使用

老师说最好不要用不要用不要用，只要React.js有方法的话使用方法很神奇，搞不懂含义暂且先这么记着吧： ref={( p)=>this.p=p}class Post extends Component { goodHeight(){ console.log(this.p.offsetHeight); } render () { return (<p className='pp' ref={(p)=>this.p=p} onClick={thi.

2020-05-13 22:32:58 229

原创 React状态提升，子组件的值放在父组件中，使同级子组件可以使用

父组件：PercentageApp。子组件：Input，用来输入数字；PercentageShower：用来展示百分比。父组件的state中存num值，并写一个修改值的changeNum函数，作为参数numChange传递给Input。Input中，用户输入值时，触发方法changeValue，changeValue中调用父组件传来的numChange方法，并把用户输入的值传递给这个方法。最后，子组件PercentageShower接收父组件传来的参数num并使用即可。class Input ex.

2020-05-13 20:30:11 209

原创 React渲染列表数据

JSX中使用{}，{}里如果放入数组，React.js会把数组里的一个个元素罗列并渲染出来。const lessons = [ { title: 'Lesson 1: title', description: 'Lesson 1: description' }, { title: 'Lesson 2: title', description: 'Lesson 2: description' }, { title: 'Lesson 3: title', description: 'L

2020-05-13 18:17:49 495

原创 React中配置组件的props和state值

需求：电脑Computer组件，包含Screen组件和按钮button。Computer组件：有状态status：on和off。Screen组件：有props.showContent属性，接收传入值，如无默认“哈哈哈默认值”。显示一个文本，有onText和offText两个值，是电脑组件状态分别为on和off时的对应值。button按钮，可以修改Computer的statusclass Screen extends Component { render () { return (

2020-05-11 20:59:23 148

原创 React事件监听和State状态修改

on*函数可直接使用，但只能使用在html标签上，自己创建的组件标签不可狗子组件：点击会打印bark和runclass Dog extends Component { bark () { console.log('bark') } run () { console.log('run') } render () { return (<div onClick={ //有两个方法需要实现，所以用一个函数进行封装 ()=&gt.

2020-05-10 19:44:22 4517 1

原创 JSX 新手上道

理解下来，JSX就是封装起来了一个方法。可以直接写html元素，而不用自己写DOM的createElement一步步去操作了。一开始有点难以理解，多敲几遍其实非常好上手//class创建一个组件，方便以后复用、嵌套class Xx1 extends Component{//render渲染render(){return(//return里面直接写html元素，也可以直接使用组件<Xx2/>，还可以写表达式{xxx}，{xxx}可以写任何js代码)}}//最后把这个类Xx1插

2020-05-10 11:50:04 101

原创 React修改页面标题，初次渲染

1、在建立的React项目的index.js文件中，创建函数renderContentfunction renderContent(content){ class Haha extends Component{ render(){ //JSX语法可以直接return Html结构 return( <h1>{content}</h1>); } } ReactDOM.render( //ReactDOM.render(templa

2020-05-09 23:38:22 415

原创 ES6语法

1、增加let和const生成变量2、箭头函数xx()=>{}3、数组增加方法：map、reduce、filter4、面向对象：构造函数用class声明，可继承父类

2020-05-08 23:38:28 101

原创 vscode新建React项目及初始化

1、npm init my-app2、npm start该项目就发布了初始化：1、在index.js文档中删除import app的语句2、删除app的js和css

2020-05-08 23:35:57 947

qq_40029828的博客