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

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

react-native-android react-native javascript

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 年前

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 将在子级中自动更改。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前