【发布时间】：2015-01-28 06:17:20
【问题描述】：
我正在使用多个级别的 React JSX 模板作为我的 Express 应用程序视图（使用 https://github.com/reactjs/express-react-views），并且想知道从最低级别的模板（default.jsx，in GitHub 上的示例和我的项目）到所有使用 {this.props.children} 的模板。我很确定将它放在 default.jsx 级别。
我的问题是：我不知道在不使用<CustomComponent prop="prop value"> 语法的情况下定义道具的正确方法是什么（我想做的是siteName）。在与组件相同的级别/相同的文件中执行此操作的正确方法是什么？或者是否存在我缺少的抽象级别？代码如下。
/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 */ });
};
【问题讨论】：
-
有点不清楚您要达到的目标。您可以通过写 transfer all props 从所有者组件到他的孩子：
return <Component {...this.props} more="values" />;。