class Component extends React.Component{
constructor(props){
super(props);
this.state={
name : 'Rosen',
age : 18
}
}
handleClick(){
this.setState({
age : this.state.age + 1
});
}
onValueChange(e){
this.setState({
age : e.target.value
});
}
render(){
return (
<div>
<h1>I am {this.state.name}</h1>
<p>I am {this.state.age} years old!</p>
<button onClick={(e) => {this.handleClick(e)}}>加一岁</button>
<input type="text" onChange={(e) => {this.onValueChange(e)}}/>
</div>
);
}
}

class Title extends React.Component{
constructor(props){
super(props);
}
render(props){
return <h1>{this.props.children}</h1>
}

}
class App extends React.Component{
render(){
return (
<div className="">
{/* 容器式组件 */}
<Title>
<span>App Span</span>
<a href="">link</a>
</Title>
<hr/>
{/* 单纯组件 */}
<Component/>
</div>
);
}
}
这里Title组件有两个标签组成span和a标签,在Title组件中获取父组件传递的数据可以通过
this.props.children来展示数据