作为经典对象的React组件
作为经典对象的React组件
提问于 2016-02-19 19:19:50
我希望有一个用户对象，它将是react组件，这样它就可以渲染它的配置文件。但我也想访问它的状态，在需要的时候从其他组件。我想定义一些可以作为getter使用的方法。所以我想做像这样的事情
const User = module.exports = React.createClass({
propTypes: {
GoogleUser: React.PropTypes.object
},
getInitialState(){
return {
name: 'John Doe',
email: 'john@mail.com',
id: 123
};
},
render(){
return '<span>'+this.state.name+'</span>';
},
Profile(){
return {
name: this.state.name,
email: this.state.email
};
}
});但是，当我将创建的元素作为参数传递并访问Profile()方法时，它是未定义的。我如何才能以一种直接且尽可能少的代码访问用户的方式来做到这一点呢？
回答 1
Stack Overflow用户
发布于 2016-02-19 19:45:59
有两种方法可以实现这一点。最常用的方法是将更改侦听器传递给组件，每当组件状态发生更改时都会通知该侦听器。
其基本思想是将回调属性传递给组件，并在状态发生变化时更新该回调。所以你会有像这样的东西
propTypes: {
//parent component will declare and pass this observer
onStateChange: React.PropTypes.func
},
getDefaultProps() {
return {
//declare default null function
onStateChange: () => null,
};
},
//call this function whenever a change is made to the state
handleStateChange(newState) {
onStateChange(newState);
}实现这一点的另一种方法是公开一个函数并使用refs访问它。请参见React文档中的Expose Component Functions。这种方式更接近于您在上面粘贴的代码，但它不太常用，并且有点背离了React范例。我的建议是真正尝试让回调方法在您的应用程序体系结构中工作，而且只有在您确定它不是使用公开组件函数方法的正确解决方案的情况下。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35513265
复制
相似问题
Eclipse中的多目标模式错误
Eclipse显示错误(无法解析目标)
错误显示“无法连接到目标”
无法将Sony Xperia L C2104连接到eclipse
将SQL Server 2005连接到Eclipse
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
