鉴于以下内容,是否可以从子(非反应组件)元素访问父上下文而不是容器?
示例记录容器,理想情况下它会记录父容器。我希望Parent
能够自包含,而不是让它的容器由其容器管理。
var Container = React.createClass({
getInitialState: function () {
return {
context: 'container'
}
},
render: function () {
return (
<Parent>
<a href="#" onClick={function () {console.log(this.state.context);}.bind(this)}>click me</a>
</Parent>
);
}
});
var Parent= React.createClass({
getInitialState: function () {
return {
context: 'parent'
}
},
render: function () {
return (
<div>
{this.props.children}
</div>
);
}
});
如果还有其他处理方式,请分享。
注意:要明确,我了解this
关键字的工作原理以及上述示例的工作原理。这个例子只是为了说明问题。
答案 0 :(得分:1)
您可以为此导入一些React助手:
var React = require('react')
...
var children = React.Children.map(this.props.children, child => {
return React.cloneElement(child, {
context: this.state.context
})
})
render() {
return <div>{ children }</div>
}
...
那么你的子组件将有this.props.context
,它将是字符串'parent',但是这必须是一个React组件,因为this
需要使用父prop来引用组件
var YourComponent = React.createClass({
render() {
return (
<a href="#" onClick={() => console.log(this.props.context)}>
click me
</a>
)
}
})
------
var Parent = require('./Parent')
var YourComponent = require('./YourComponent')
...
render() {
return <Parent><YourComponent /></Parent>
}
答案 1 :(得分:0)
我不知道你问题的第一部分,但是既然你评论了动态创建组件,我就是这样做的:
您可以在类的构造函数及其父级中设置状态变量:
if (typeof this.state == 'undefined') {
this.state = {
componentsToRender: <div></div>
};
}
然后在父组件中,在componentDidMount()
函数中:
var componentsToRender = [];
if ([conditional]) {
// some logic so you know which component to render
componentsToRender.push(<customChildComponentToRender key={} />);
}
else {
componentsToRender.push(<otherComponentToRender key={} />);
}
this.setState({
componentsToRender: <div>{componentsToRender}</div>
});
确保放置一个键(第二个代码块的第4行和第7行)或React会对你尖叫。
在回答您的初步问题时,我会看this video from the ReactJS Conference 2015以获得容器背后的更多内容。在听到Facebook上的人说(对容器有激进观点的人)之后,您可能想重新考虑设计,使您的容器更像数据层。
答案 2 :(得分:0)
我会查看来自反应网站的THIS文章。我认为这可能会让你对解决问题有一些直觉。
作为一般经验法则,我尝试仅使用this.state来处理特定组件的内部UI状态。其他一切都通过道具传递。如果您需要组件的完整上下文,我会将其作为prop或checkout传递给flux或redux,这将帮助您管理组件之间的状态。