Question

我正在使用多级React JSX模板作为Express应用程序的视图（带https://github.com/reactjs/express-react-views），并想知道从最低级别模板传递道具的最佳方法（default.jsx ，在GitHub和我的项目的示例中）到使用{this.props.children}的所有模板。我很确定将它放在default.jsx级别。

我的问题是：我不知道在没有使用siteName语法的情况下，定义道具（我想要做的是<CustomComponent prop="prop value">）的正确方法是什么。在与组件相同的文件/同一文件中执行此操作的正确方法是什么？或者是否存在我缺少的抽象层次？代码如下。

/views/layouts/default.jsx（我想在哪里定义siteHeader，让它一直向下传播）：

/** @jsx React.DOM */

var SiteHeader = require('../header.jsx');

var DefaultLayout = React.createClass({
    render: function() {
        return (
            <html>
                <head>
                    <h1>{this.props.siteName} - {this.props.title}</h1>
                </head>
                <body>
                <SiteHeader></SiteHeader>
                {this.props.children}
                </body>
            </html>
        );
    }
});

module.exports = DefaultLayout;

/views/index.jsx：

/** @jsx React.DOM */

var DefaultLayout = require('./layouts/default.jsx');

var ViewsExport = React.createClass({
    render: function() {
        return (
            <DefaultLayout title={this.props.title}>
                <div>Hello, {this.props.name}!</div>
            </DefaultLayout>
        )
    }
});

module.exports = ViewsExport;

/views/header.jsx：

/** @jsx React.DOM */

var SiteHeader = React.createClass({
    return: function() {
        <header>
            <h1><a href="">{this.props.siteName}<h1>
            <nav>
                ...
            </nav>
        </header>
    }
});

/routes/index.js：

exports.index = function(req, res){
  res.render('index', { /* props */ });
};

Answer 1

不确定，但我认为你要找的是React context。

虽然我们没有记录上下文，但它以某种形式存在于中已经反应过了。它作为一种通过树传递值的方式而存在无需在每一个点使用道具。我们已经看到了这一点需要一次又一次地出现，所以我们想让它变得如此简单可能。它的使用具有性能权衡，并且已知我们实施的弱点，所以我们要确保这是一个坚实的特征。

另见http://davehking.com/2014/11/15/introduction-to-contexts-in-react-js.html

它尚未正式发布，因为它似乎有一些基本案例问题，但实际上是由许多人使用，而构建在React之上的框架。我也使用它，但没有发现任何错误。 React团队成员告诉我该功能不会被删除，因此API可能会更改，但您仍然可以期望此功能出现在下一版本中。

如何在组件级别定义道具？

1 个答案: