首先是
ES5的写法:
const Com1 = React.createClass({
//创建一个类,就是构建一个组件
render(){
return <h1>hello ES5 react component!!!</h1>
}
});
ReactDOM.render(
<div>
<h1>Hello React!!!</h1>
<Com1></Com1>
</div>,
document.querySelector(".box")
)
ES6 写法
class Com2 extends React.Component{
render(){
return <h1>Hello ES6 React component</h1>
}
};
ReactDOM.render(
<div>
<h1>Hello React!!!</h1>
<Com1></Com1>
{/*单双标签都可以,只要有结束字符就可以 <Com2></Com2>可以写成<Com2/>*/}
<Com2></Com2>
</div>,
document.querySelector(".box")
)
我们在class Com2 里面写一个根节点
class Com2 extends React.Component{
constructor(props){
super(props);
}
render(){
return <div>
<h1>Hello ES6 React component</h1>
<h3>{ this.props.msg }</h3>
{/*<Com1 msg="随便" items={["t4","t5","t6"]}></Com1>*/}
</div>
}
};
ReactDOM.render(
<div>
<h1>Hello React!!!</h1>
<Com1 msg="你好"/>
<Com2 msg="你好" ></Com2>
</div>,
document.querySelector(".box")
)
在标签上传值
我们在 Com2 标签上进行传值,我们通过标签属性设置了一个msg,我们怎么拿到 msg 呢,就是 在class 里面,写一个标签把变量放在标签里面{ this.props.msg }
但是,ES6 继承下来的类,没有this,要显示的传,一个constructor(props){
super(props);}
const Com1 = React.createClass({
getDefaultProps(){
return {
msg :"默认的msg"
}
},
propTypes:{
msg : React.PropTypes.oneOf(["a","b"])
},
render(){
console.log(1,this.props)
console.log(2,this.props.children)
return <div>
<h1>Hello React component ES5</h1>
<span>{ this.props.msg }</span>
<ul>
{
this.props.items.map((item,i)=>{
return <li key={ i }>{ item }</li>
})
}
</ul>
{this.props.children}
{/*
this.props.children.map((m,n)=>{
return <i key={n}>{ m }</i>
})*/
}
{
React.Children.map(this.props.children,(m,n)=>{
return <b key={n}>{m}</b>
})
}
</div>
}
});
ReactDOM.render(
<div>
<h1>Hello React!!!</h1>
<Com1 msg="b"
items={ ["t1","t2","t3"] }>
</Com1>
<Com2 msgs="你好" ></Com2>
<Com2 />
</div>,
document.querySelector(".box")
)
this.props
组件外向组建内传值,用this,props
传值的方法是一样的,在标签里面写一个属性,但是接值得时候方法不一样:由于继承的子类没有this(作用域),所以在ES6中,需要使用construtor 得到 this
// 而在ES5中,createClass 所创建的类,自动拥有this,可直接使用this.props
// this.props 得到父集向下传递的数据
// this.props.children 得到组件的原始内容(子元素)
//当有一个子元素时,返回对象
// 当有多个元素时,返回数组
// 没有子元素时,返回 undefined
一个组件,两个地方用,
把组件一,items 的t1,t2.t3.用this.props.items.map()的方法遍历出来,用 li 标签包裹
我们再在组件里面添一个属性,
