一、条件渲染
语法：使用原生 js 的 if 或者 三元表达式 判断
例子：判断用户是否登录，提示：已登录、未登录 （User组件）
<script type="text/babel">
// 判断用户是否登录，提示：已登录、未登录 （User组件）
class Login extends React.Component{
constructor(props) {
super(props)
this.state = {
token : "adasd"
}
}
render(){
let {
token
} = this.state
// if(token){
// return <div><p>已登录</p></div>
// }else{
// return <div><p>未登录</p></div>
// }
return <div><p>{ token ? '已登录' : '未登录' }</p></div>
}
}
ReactDOM.render(<Login />,document.querySelector('#app'))
</script>
二、列表 & key
语法：
forEach 遍历数组
map 修改数组的数据，返回一个【修改过】的数组
filter 过滤数组的数据，返回一个【新】的数组
find 找值
findIndex 找下标
let newArr = arr.map((item,index)=> {// 遍历arr数组，将里面的值挨个赋值给item
return 数据 // return的数据会push到newArr中
})
例子：
<script type="text/babel"> class List extends React.Component{ constructor(props){ super(props) this.state = { list : ['周瑜','小乔','诸葛'], listObj : [ {id:1,content:'xxxxx1'}, {id:2,content:'xxxxx2'}, {id:3,content:'xxxxx3'}, {id:4,content:'xxxxx4'} ] } } render() { let { list, listObj } = this.state let listNew = list.map((item,index) => { return <li key={index}>{ item }</li> }) let newListObj = listObj.map((item,index) => { return <li key={index}>id:{ item.id },content：{ item.content }</li> }) return <div> <p>数组</p> <ul>{listNew}</ul> <p>对象</p> <ul>{newListObj}</ul> </div> } } ReactDOM.render(<List />,document.querySelector('#app')) </script>
三、表单
① 受控组件
渲染表单的React组件还控制着用户输入过程中表单发生的操作
② 非受控组件
value值为只读的0
如：input type='file'
③ 数据双向绑定
1. 绑定 value 值
2. change 事件触发
3. 跟新模型数据
例子：
<script type="text/babel"> class Test extends React.Component{ constructor(props){ super(props) // 模型数据 this.state = { value1 : 'value1', value2 : 2, value3 : 'value3' } } render() { let { value1, value2, value3 } = this.state return ( <div> <p>input</p> <input type="text" name="value1" value = {value1} onChange = { this.onChangeFn.bind(this) }/> <p>select</p> <select name="value2" value = {value2} onChange = { this.onChangeFn.bind(this) }> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <p>textarea</p> <textarea name="value3" value = {value3} onChange = { this.onChangeFn.bind(this) }></textarea> </div> ) } // 方法 onChangeFn(e){ // 获取数据 let value = e.target.value let name = e.target.name // 更新数据 this.setState({ [name]:value }) } } ReactDOM.render(<Test />,document.querySelector('#app')) </script>
四、组件样式
语法：
① 外部引入
<link rel="stylesheet" href="路径及文件名.css">
② 行内样式
<标签名 style={ {css属性名:属性值，....，css属性名n:属性值n} }></标签名>
注：React 中添加 class 通过 className
<p className = {'aa'}>22</p>
五、ref标记
语法;
<标签 ref="标识"></标签名>
this.refs.标识 使用该语法获取DOM元素
六、组件通信
① 父传子
语法
父在调用子组件上传递数据
子通过this.props.键获取数据
例子
② 子传父
语法
父定义普通方法接受数据
子调用普通方法传递数据
例子
<script type="text/babel"> class Test1 extends React.Component{ constructor(props){ super(props) // 更改 this 指向 this.sendData = this.sendData.bind(this) this.state = { msg :'' } } render(){ return ( <div> <p ref={'test'}>Test1</p> {/* 传递方法 */} <Test2 sendData = {this.sendData}/> </div> ) } // 方法 // 接收数据 sendData(data){ console.log('子数据',data); // 更改数据 this.setState({ msg : data }) } } class Test2 extends React.Component{ constructor(props){ super(props) this.state = { msg:'5566' } } componentDidMount(){ // 传递数据 this.props.sendData(this.state.msg) } render(){ return ( <div> <p ref={'test'}>Test2</p> </div> ) } } // 页面加载 ReactDOM.render(<Test1 />,document.querySelector('#app')) </script>
③ 非父子
语法
父在调用n个子组件上传递数据（公共父）
子通过this.props.键获取数据
例子
<script type="text/babel">
//定义公共父类
class Test extends React.Component {
constructor(props) {
super(props)
this.state = {
age:15
}
}
render() {
return (
<div>
<p ref={'test'}>Test0</p>
{/* 传递数据 */}
<Test1 sendAge = {this.state.age}/>
<Test2 sendAge = {this.state.age}/>
</div>
)
}
}
class Test1 extends React.Component {
constructor(props) {
super(props)
this.state = {
msg: ''
}
}
render() {
return (
<div>
<p ref={'test1'}>Test1</p>
{/* 接受使用数据 */}
<p>{this.props.sendAge}</p>
</div>
)
}
}
class Test2 extends React.Component {
constructor(props) {
super(props)
this.state = {
msg: '5566'
}
}
render() {
return (
<div>
<p ref={'test2'}>Test2</p>
{/* 接受使用数据 */}
<p>{this.props.sendAge}</p>
</div>
)
}
}
// 页面加载
ReactDOM.render(<Test />, document.querySelector('#app'))
</script>