-
react 是面向数据编程
更改数据用 this.setState()
查看全部 -
用户定义的组件必须以大写字母开头
以小写字母开头的元素代表一个 HTML 内置组件
比如 <div> 或者 <span> 会生成相应的字符串 'div'或者 'span' 传递给 React.createElement(作为参数)。大写字母开头的元素则对应着在 JavaScript 引入或自定义的组件
如 <Foo /> 会编译为 React.createElement(Foo)。
我们建议使用大写字母开头命名自定义组件。如果你确实需要一个以小写字母开头的组件,则在 JSX 中使用它之前,必须将它赋值给一个大写字母开头的变量。查看全部 -
温馨提示:使用箭头函数以避免在标签内部或者constructer内部bind(this)的繁琐操作,示例代码如下:
handleDelete = ()=>{
your code
}
查看全部 -
React 组件传值:
<ul>{
this.state.list.map((item,index)=>{
return <TodoItem content={item}/>
})
}</ul>
注释:item 传的值
index :值的位置
TodoItem :组件名称
组件接收值:
先创建组件:
import React from 'react';
class TodoItem extemds React.Component{
render(){
return(
<div>{}</div>
)
}
}
export default TodoItem;//导出组件
组件接收传过来的值时:
只需要更改接收方式:
<div>{this.props.content}</div>
记:父组件通过属性的形式给子组件传递参数
子组件通过this.props.(传过来的参数)来接收
查看全部 -
lts长期稳定版本。 current最新版
查看全部 -
index.js 是入口,引入React帮助我们理解语法,ReactDOM可以帮我们把组建渲染到组件上,App是一个组件,App.js就是一个组件
定义组件:class 名称 extends React.Component 显示的内容是render函数里面的return的内容
export default 名称 是导出 这样子其他地方才可以导入
查看全部 -
<React.Fragment></React.Fragment>可代替根元素 <div></div>
查看全部 -
React 中规定在循环标签的时候,标签内要添加 key 属性,且 key 值不能一样,所以一般值设为循环项的索引值
查看全部 -
首先,index.js他是一个入口,首先他引入了react,帮助我们去理解app开头的组件,又引入了reactdom,帮助我们将组件渲染到一个root节点上。结尾的export default app是将其导出,这样,在index.js中才能将他再导入进去,导出和导入是配对使用的。
而app就是一个组件,她在app.js当中定义,首先,需要定义一个APP的类,她继承react.component.
当一个类集成了react.componet后他就是react中的一个组件,react 组件中必须有一个函数叫做render,这个函数负责这个组件要显示的内容,并且这个函数会return一个内容,他return回去的内容就是这个组件要 显示的内容
查看全部 -
constructor(props){ super(props); this.state={ list:[], inputValue:'' //清空 } } //2.当点击提交时,列表添加 handleBtnClick(){ this.setState({ list:[...this.state.list,this.state.inputValue], inputValue:'' //清空 }); } //1.先执行输入框的监听事件,当值改变时监听 handleInputChange(e){ this.setState({ inputValue:e.target.value //获取input框的值 }) } render() { return ( <div> <div> <input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}/> <button onClick={this.handleBtnClick.bind(this)}>add</button> </div> <ul> {/*表达式*/} { this.state.list.map((item,index)=>{ return <li key={index}>{item}</li> }) } </ul> </div> ); }
查看全部 -
react 操作数据,不需要操作dom ;
在react 中操作 state中的数据,尽量不直接操作state的数据,而是拿一个变量接收后,再操作该变量
如删除函数handleItemClick (index){
const newList = [...this.state.list]; // 拿newList接收 state中list的值
newList.splice(index,1); //删除newList中de 该 index的值
//将删除后的数组放置在state中,
this.setState({
list:newList
})
}
查看全部 -
构造函数
constructor(props){super(props);
this.state = {
list:[
。。。// 要展现的数组
]
}
}
查看全部 -
onClick = {this.handleBtnClick}
点击事件 onClick ={ } 大写
this 指向 handleBtnClick这个事件函数
没有该事件,则创建 该函数
handleBtnClick(){。。。
}
查看全部 -
1-1 react 简介
查看全部 -
组件通信:
父 =》 子
父组件通过属性的形式向子组件传递参数
子组件通过props接收父组件传递过来的参数
子 =》 父
子组件通过调用父组件传递过来的方法
父组件通过方法的参数获取子组件传递过来的参数
查看全部
举报