一、数组遍历显示
import React,{Component} from 'react';
class RepeatArray extends Component{
constructor() {
super();
}
render(){
const names = ['Alice', 'Emily', 'Kate'];
return (
<div>
{
names.map((name) =>{return <div>Hello, {name}!</div>;} )
}
</div>
);
}
}
export default RepeatArray;
二、ol与li的实现
import React,{Component} from 'react';
class RepeatLi extends Component{
render(){
return (
<ol>
{
this.props.children.map((child)=>{return <li>{child}</li>})
}
</ol>
);
}
}
class RepeatArray extends Component{
constructor() {
super();
}
render(){
return (
<div>
<RepeatLi>
<span>hello</span>
<span>world</span>
</RepeatLi>
</div>
);
}
}
export default RepeatArray;
三、从服务端获取数据
import React,{Component} from 'react';
class UserGist extends Component{
constructor(){
super();
this.state={
username:'',
lastGistUrl:''
}
}
componentWillMount(){
$.get(this.props.source, function(result) {
var lastGist = result[0];
//if (this.isMounted()) {
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
});
//}
}.bind(this));
}
render(){
return(
<div>
{this.state.username} ..
<a href={this.state.lastGistUrl} >here</a>
</div>
);
}
}
class RepeatArray extends Component{
constructor() {
super();
}
render(){
return (
<div>
<UserGist source="https://api.github.com/users/octocat/gists" />
</div>
);
}
}
export default RepeatArray;
四、初始化STATE
class Video extends React.Component {
constructor(props){
super(props);
this.state = {
loopsRemaining: this.props.maxLoops,
};
}
}
五、解构与扩展操作符
在给子组件传递一批属性更为方便了。下面的例子把className
以外的所有属性传递给div
标签
class AutoloadingPostsGrid extends React.Component {
render() {
var {
className,
...others, // contains all properties of this.props except for className
} = this.props;
return (
<div className={className}>
<PostsGrid {...others} />
<button onClick={this.handleLoadMoreClick}>Load more</button>
</div>
);
}
}