<body>
<script type="text/babel">
var Movie = React.createClass({
render: function () {
return(
<div>
<h1>{this.props.titulo}</h1>
<h1>{this.props.genero}</h1>
</div>
);
}
});
ReactDOM.render(<Movie titulo="Mi titulo" genero="Masculino" />, document.getElementById('app'));
<script>
</body>
状态示例
<body>
<script type="text/babel">
var CheckBox = React.createClass({
//obtengo el estado del checkbok
getInitialState : function(){
return {checked: !this.state.checked}
},
handleChecked: function (){
//cambio el estado
this.setState({checked: !this.state.checked})
},
render: function () {
var mensajito;
// valido el estado del checkbox
if(this.state.checked){
mensajito = 'checado';
}else{
mensajito = 'no checado';
}
return(
<div>
/* aqui es donde cambio el estado del checkbox y le pongo por default checked */
<inpit type="checkbox" onchange={this.handleCheked} defaultCheked={state.cheked} />
<h1> el checkbox esta {mensajito} </h1>
</div>
);
}
});
ReactDOM.render(<CheckBox />, document.getElementById('app'));
<script>
</body>
我看到道具不是状态,它们是应用程序中使用的组件根据官方文档它说:[道具
组件的属性可以定义为该组件的配置属性。它们是从更高级别接收的(通常在组件被实例化时)并且根据定义是不可变的,也就是说,组件不能更改自己的 props。
有几种方法可以将 props 传递给组件。
// 常规方式 ;
// 传播属性 let props = {}; 道具.foo = x; 道具.baz = y; ;
// 组合方式 ;
状态
我们可以将其定义为组件在某个时间点的表示,即组件的快照。组件的状态将从默认值开始,但该值将能够在组件的生命周期内发生变化。
我们不必为组件定义状态,它们是可选的,并且与 props 不同,组件可以管理自己的状态。但是我们在使用状态时必须小心,因为引用文档本身会增加复杂性并降低可预测性。避免使用过多的有状态组件,尤其是对于大型应用程序。
通知 React 组件其数据已更改的常用方法是调用 setState() 方法。此方法接收一个普通的 JavaScript 对象,将新数据合并到状态中,然后重新渲染组件。当渲染完成时,如果已指定回调,则将执行回调。
this.setState( { key: 'value' } );
另一种与组件状态相关的方法是replaceState。没什么好说的,只是它类似于 setState 但它会删除任何未在新状态中定义的预先存在的键。
注意:此方法在 ES6 类语法中不可用,可能会在未来版本的 React 中删除。] 1
我们可以使用 props 来访问属性,但您不能更改它们的 value=state
注意:我使用 Babel
道具示例:
状态示例
结论状态可以改变!!如果您使用道具并且希望按钮在每次单击时更改颜色,则无法使用状态来更改按钮每次单击时的状态。