<!DOCTYPE html>
<!-- React 允许将代码封装成组件（component），
然后像插入普通 HTML 标签一样，在网页中插入这个组件。 -->
<html>
<head>
<script src="./js/react.js"></script>
<script src="./js/react-dom.js"></script>
<script src="./js/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var HelloMessage = React.createClass({
render:function () {
return <h1>hello {this.props.name}</h1>
}
})
ReactDOM.render(
<HelloMessage name="Helen" />,
document.getElementById('example')
);
</script>
</body>
</html>
注意
<HelloMessage name="Helen" />是个半闭合标签，少/会报错
React的props
React中的每一个组件，都包含有一个属性（props），在组件内部，我们可以通过this.props获取属性对象。
组件如下：
React.render(
<HelloWorld name="Jack"/>, //name属性的值是“jack”
document.getElementById('container')
); 属性使用方法：
1.直接调key/value
var HelloWorld = React.createClass({
render:function(){
return {
<div> hello{this.props.name} </div>
}
}
}); 2.延展属性
用{...props}方法
<div id="example"></div>
<script type="text/babel">
// 创建组件 React.createClass
var HelloMessage = React.createClass({
render:function () {
return <h1>hello {this.props.name1},{this.props.name2}</h1>
}
})
var props = {
name1:"andy",
name2:"tom"
}
ReactDOM.render(
<HelloMessage {...props}/>,
document.getElementById('example')
);
</script>3.调用组件的setProps函数来指定属性
<div id="example"></div>
<script type="text/babel">
var HelloMessage = React.createClass({
render:function () {
return <h1>hello {this.props.name}</h1>
}
})
var instance = React.render( // 为什么不是ReactDOM.render？？
<hello />,
document.getElementById('example');
)
instance.setProps({name:'jack'});
</script>自己设置了组件的属性值。
但是不建议用这种方式修改属性值，因为React没有办法帮你检查属性的类型（propTypes）。如果用在工程中，这么轻易改掉又没检查监督，很容易出问题。所以不要轻易修改。
内容来源于网络如有侵权请私信删除
- 还没有人评论，欢迎说说您的想法！
客服
