react --- 组件以及通过属性传值

1.在使用时需要引入的文件:

<script src='react.js'></script>
<script src='react-dom.js'></script>

<script src='babel.min.js'></script>//用来将ES6语法转化为ES5语法

2.代码:

        <div id='example'></div> //用来渲染的容器
<script type='text/babel'> //注意类型一定要申明
var SayName = React.createClass({ /*创建一个组件*/
/*标签外注释*/
/*传入的参数是一个对象*/
render:function(){
return (
<div>  {/*当组件有多个标签时要用一个根标签包裹*/}

{/*标签内注释*/}
{/*通过属性传值*/}
<Name name={this.props.name} />
<Context text={this.props.text} />
</div>
);
}
});
var Name = React.createClass({
render:function(){
return (
<h2>{this.props.name}</h2>
);
}
});
var Context = React.createClass({
render:function(){
return (
<p>{this.props.text}</p>
)
}
});
ReactDOM.render(

<SayName name='hello world' text='hello hello hello!' />,

                /*获取所要渲染的容器*/

document.getElementById('example')
);
</script>

猜你喜欢

转载自blog.csdn.net/hahahahahahahaha__1/article/details/80454340