RN 学习之前需要有些js基础,ES6,React需要先学习。
简单做下学习ES6,React的笔记:
组件和props:
class ClassTest extends React.Component{
constructor(props){
super(props);
}
render(){
let {name,age} = this.props;
return (
<div>
Name is :{name},Age is {age}
</div>
);
}
}
使用: <ClassTest name="hahahahaha" age="18" />
props 是只读的不能修改,所以这个东西只是用来展示的。
如果想要修改怎么办的,那就使用state。
20181008:
React 条件渲染的几种方式:
1. 元素变量 即用 if 判断
2. 与运算符 &&
{readMessage.length > 0 && (<h2>You have {readMessage.length} 条信息未读</h2>)}
3.三目运算符
4.阻止渲染 返回 null 就可以了
列表组件:
直接上例子:
class ListTest extends React.Component{
constructor(props) {
super(props);
this.numbers = this.props.numbers.map((number)=><li>{number}</li>);
this.state = {
name: '',
age: null,
sex: ['男', '女'],
};
}
render(){
return (
<div>
<ul >{this.numbers}</ul>
</div>
);
}
}
但是上面的代码在运行时会出现一个错误:
于是我们修改成这个:
class ListTest extends React.Component{
constructor(props) {
super(props);
this.numbers = this.props.numbers.map((number)=><li key={number}>{number}</li>);
this.state = {
name: '',
age: null,
sex: ['男', '女'],
};
}
render(){
return (
<div>
<ul >{this.numbers}</ul>
</div>
);
}
}
这样就可以了,木有问题了
表单:
直接撸码:
class NameForm extends React.Component{
constructor(props){
super(props);
this.state = {
value:'Please write an essay about your favorite DOM element.',
};
}
handleChange = (event) => {
this.setState({value:event.target.value});
}
handleSubmit = (event)=>{
alert('A name was submitted:' +this.state.value);
event.preventDefault();
}
render(){
return (
<form onSubmit={this.handleSubmit}>
<label>
Pick your favorite La Croix flavor:
<select value={this.state.value} onChange={this.handleChange}>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>
</label>
<input type="submit" value="Submit"/>
</form>
);
}
}