获取道具（或全局变量）

Question

我正在尝试在我的应用程序上设置一些全局变量，我希望所有组件都可以使用这些变量。例如，我想将 'language' 和 'status' 属性传递给每个组件。属性不会呈现到页面上，而是添加到每个组件的道具中，这样我就可以在每个组件加载并输出适当的样式和语言时检查该变量。

我希望这会像向路由器添加道具一样简单，但是无论我尝试什么，道具都会在我的子组件上以 'undefined' 的形式返回（只有主 layoutWrapper 组件获得道具).这是到目前为止的样子：

//app.js

var LayoutWrapper = React.createClass({
  render: function () {
    return (
        <Layout status="available" />
    );
  }
});

ReactDOM.render(
  <Router history={hashHistory}>
   <Route path="/" language="en-gb" component={LayoutWrapper}>
     <IndexRoute component={Index}></IndexRoute>
   </Route>
  </Router>,
app);

Answer 1

在处理全局级别的状态数据时，建议您使用某种状态框架，例如 Flux。我推荐 Redux，因为它在减少样板代码方面做得很好，可以轻松地将应用程序状态传递给任何连接的组件（并随后订阅这些组件以响应状态中的任何更改）。

您正在做的事情失败了，因为没有一致的方法来创建 "global" 道具；您可以使用 context 变量，但这是一个不稳定的特性，不建议在生产环境中使用。否则，您必须手动将道具从 parent 传递到 child。

获取道具（或全局变量）

Get props (or global variables)

reactjs

react-router