首页 文章

reactjs呈现状态或道具

提问于
浏览 次
3

我想知道直接渲染组件与状态或道具之间的区别 .

getInitialState:
    data: this.props.data

以下代码用于渲染功能

1 .

data = this.state.data
return (<Component data={data} />)

2 .

return (<Component data={this.state.data} />)

3 .

return (<Component data={this.props.data} />)

当我在监听回流动作时使用setState时，前两种情况会崩溃 . 如果有人建议使用除setState之外的其他信息，或者告诉我这三个代码片段的区别将非常受欢迎 .

reactjs state setstate

2 回答

  • 2

    把道具置于这样的状态：

    getInitialState: function () {
  return {
    someKey: this.props.someKey
  };
}

    是一种反模式，除非您打算稍后修改 someKey 的值，并将prop用作初始值 .

    所以如果你不改变传入的道具的 Value ，你应该选择第三 .

    不同之处在于，没有状态的组件可以被认为是“纯粹的”（传入的相同道具每次都提供相同的输出），并且这些组件几乎总是更容易推理 . 在不改变状态的情况下复制prop状态只会在组件中提供更多代码行，并且可能会让其他人阅读代码时感到困惑 . 它是一个纯粹的组件伪装成一个不纯的组件 .

    回复于
  • 6

    关于道具和国家的更多信息 . 道具和州是相关的 . 一个组件的状态通常会成为子组件的支柱 . 道具作为React.createElement（）的第二个参数传递给父级的render方法中的子级，或者，如果您使用的是JSX，则是更熟悉的标记属性 .

    <MyChild name={this.state.childsName} />

    childsName的父级状态值成为子的this.props.name . 从孩子的角度来看，名称prop是不可变的 . 如果需要更改，父级应该只更改其内部状态：

    this.setState({ childsName: 'New name' });

    和React会将它传播给孩子 . 一个自然的后续问题是：如果孩子需要更改其名称支柱怎么办？这通常通过子事件和父回调来完成 . 孩子可能会暴露一个名为onNameChanged的事件 . 然后，父级将通过传递回调处理程序来订阅该事件 .

    <MyChild name={this.state.childsName} onNameChanged={this.handleName} />

    孩子会通过调用例如this.props.onNameChanged（'New name'）将其请求的新名称作为事件回调的参数传递，并且父将使用事件处理程序中的名称来更新其状态 .

    handleName: function(newName) {
   this.setState({ childsName: newName });
}
    回复于

相关问题