代码之家 › 专栏 › 技术社区 › Michael Artman

通过状态将支柱传递给组件

react-native-android react-native javascript

1

Michael Artman · 技术社区 · 8 年前

前缀:

我正在使用react native,我想知道将道具从父组件传递到子组件的最佳实践。我只在我的android设备上测试过这个。

问题:

据我所知,可以通过使用道具将值传递给组件,即:

<myComponent myProp="some data" />

可以在myComponent中使用 this.props.myProp 。这样在构造函数中创建我的状态对象会是一种不好的做法吗(甚至会起作用):

constructor(props){
  super(props);
  this.state = {
    myStateProp: this.props.myProp
  };
}

然后可以在该组件中调用 this.state.myStateProp 。我是一个相对较新的本土人,正在努力学习尽可能多的东西。我已经在多个用例中尝试了它,结果各不相同,但对其行为还不确定。感谢您的投入!

1 回复 | 直到 8 年前

1

Matt Saunders 8 年前

这样做没有什么好的理由。它通常被认为是一种反模式,因为组件应该尽可能是无状态的。

如果您试图通过传入道具并使用as state来控制组件,我建议在父组件中保留状态,然后通过道具使用回调将任何更改传递回链。

例如

ComponentOne {
    this.state = { colour:red }

    handleColourChange(val){
        this.setState({ colour: val })
    }

    return <ComponentTwo changeColour={this.handleColourChange} colour={this.state.colour} />
}

然后想象在ComponentTwo中,我们有一个按钮,您想要更改颜色:

<button onClick={this.changeColour(blue)}>Change to blue</button>

这样子组件将保持无状态,并由其父组件控制。 this.props.colour 将在子级中自动更改。