从 React 组件访问公共 functions/data

Question

我是 React 的新手，想了解处理以下情况的正确方法。

说，我有三个 React 组件，它们本质上是兄弟姐妹，即不相互嵌套。

这三个组件都需要知道用户的屏幕分辨率，而且这个分辨率可能会改变。例如，用户可以将浏览器 window 设置为较小的尺寸。本质上，视口处于动态状态。

我不想将视口检测逻辑放入每个会产生重复代码的组件中。如何创建一个负责视口检测的通用函数并将此信息传递给每个组件？

在下面的代码示例中，我使用了三个相互独立工作的组件，但它们都需要查看端口信息。处理此问题的正确方法是什么？

<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 应用程序的上下文中处理此问题的正确方法对我来说很重要。

Answer 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
    };
  }
});

安装此组件后，它将跟踪屏幕大小，并在每次调整浏览器 window 大小时进行更新。我们现在需要做的是将这些值传递给在这个组件内部渲染的任何组件。

<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
  }
});

从 React 组件访问公共 functions/data

Accessing common functions/data from React components

asp.net-mvc

reactjs

reactjs.net