我是React的新手,想要了解处理以下情况的正确方法。
说,我有三个React组件,它们基本上是兄弟姐妹,即彼此没有嵌套。
所有三个组件都需要知道用户的屏幕分辨率,此分辨率可能会发生变化。例如,用户可以将浏览器窗口设置为较小的尺寸。实质上,视口处于动态状态。
我不想将视口检测逻辑放入每个会产生重复代码的组件中。如何创建负责查看端口检测的公共函数并将此信息传递给每个组件?
在下面的代码示例中,我有三个彼此独立工作的组件,但它们都需要查看端口信息。有什么方法可以解决这个问题?
<div id="navigationHere"></div>
<div id="doSomethingHere"></div>
<div id="handleSomethingElseHere"></div>
<script src="nav.jsx" type="text/jsx"></script>
<script src="doSomething.jsx" type="text/jsx"></script>
<script src="handleSomethingElse.jsx" type="text/jsx"></script>
顺便说一句,我在ASP.NET MVC应用程序中使用它并考虑使用ReactJs.Net来处理服务器端的初始状态和预呈现。因此,了解在ASP.NET MVC应用程序的上下文中处理此问题的正确方法对我来说非常重要。
答案 0 :(得分:1)
对于所谓的高阶组件,这是一个很好的用例。
首先,我们定义一个跟踪屏幕分辨率的父组件。
var ViewportManager = React.createClass({
getInitialState: function() {
return this.measureViewport();
},
componentWillMount: function() {
window.addEventListener('resize', this.onResize);
},
componentWillUnmount: function() {
window.removeEventListener('resize', this.onResize);
},
onResize: function() {
this.setState(this.measureViewport());
},
measureViewport: function() {
return {
width: window.innerWidth,
height: window.innerHeight
};
}
});
安装此组件后,它将跟踪屏幕大小,每次调整浏览器窗口大小时都会更新。我们现在需要做的是将这些值传递给在此内部渲染的任何组件。
<ViewportManager>
<NavigationHere />
<DoSomethingHere />
<HandleSomethingElseHere />
</Viewport>
我们会将viewportHeight
和viewportHidth
传递给每个内部组件。
var ViewportManager = React.createClass({
// ...
render: function() {
var viewportWidth = this.state.width;
var viewportHeight = this.state.height;
var children = this.props.children;
var additionalProps = {
viewportWidth: viewportWidth,
viewportHeight: viewportHeight
};
var modifiedChildren = React.Children.map(children, function(child) {
return React.cloneElement(child, additionalProps);
});
return (
<div className='viewport-manager'>
{{ modifiedChildren }}
</div>
);
}
});
现在,ViewportManager
内的所有组件都会收到两个额外的道具。
var NavigationHere = React.createClass({
render: function() {
// I can see this.props.viewportWidth
// and this.props.viewportHeight
}
});