React中的属性 this.props

花明

关注

阅读 78

2021-09-24

一.属性的使用方法
主要有三种

1.直接在组件中使用key/value形式来指定属性
React.render(
<HelloWorld name="Jack"/>,
document.getElementById('container')
);
var HelloWorld = React.createClass({
render: function() {
return (
<div>Hello, {this.props.name}</div>
);
}
});

2.使用延展属性为组件指定属性

<script type="text/jsx">
var HelloWorld = React.createClass({
render: function() {
return (
<div>Hello, {this.props.name1}, {this.props.name2}</div>
);
}
});
var props = {
name1: 'Jack',
name2: 'Tom'
};
React.render(
<HelloWorld {...props}/>,
document.getElementById('container')
);
</script>

3.通过调用组件的setProps函数为组件指定属性

<script type="text/jsx">
var HelloWorld = React.createClass({
render: function() {
return (
<div>Hello, {this.props.name}</div>
);
}
});
var instance = React.render(
<HelloWorld />,
document.getElementById('container')
);
instance.setProps({name: 'Jack'});
</script>

精彩评论(0)

0 0 举报