Javascript 使用服务器道具反应路由器服务器渲染

我想把这个物体传到这里

res.status(200).send(renderToString(<RouterContext {...renderProps} {...reactServerProps} />))

res.status（200）.send（renderToString（））

而且我似乎无法从我的组件中提供对变量的访问。

问题在于，

只将一些预定义的道具向下传递到它构建的组件树，而不是普通组件中可能需要的自定义道具

在这个问题上有一些变通办法，尽管没有一个特别漂亮。我认为我见过的应用最广泛的是用一个组件包装

，该组件的唯一目的是利用React的上下文功能&将上下文数据传递给它的子组件，而不是道具

因此：

然后在express服务器中：

// Grab the data from wherever you need then pass it to your <DataWrapper /> as a prop 
// which in turn will pass it down to all it's children through context
res.status(200).send(renderToString(<DataWrapper data={data}><RouterContext {...renderProps} /></DataWrapper>))

我知道以前可以使用

createElement

方法设置一些自定义道具，并以类似的方式将它们传递给您的子路由，但我不确定这在较新版本的react router中仍然有效。见：

---

更新：仍然可以使用中间件将附加值传递到路由组件中。通过：

您应该能够在上下文中使用道具：

function createElementFn(serverProps) {
  return function(Component, props) {
    return <Component {...serverProps} {...props} />
  }
} 

---

并使用简单的

this.props.gaKey

&

this.props.query

在您的任何子组件中访问它们。一个更简单的解决方案是将您想要的任何数据放入

props.routes

中，并将其传递到您的组件，您可以直接通过该组件访问它

props.routes.[无论你传递了什么]

所以在发球功能中你可以

props.routes.reactServerProps = {
'gaKey': process.env.GA_KEY,
'query': req.query
}

在您的组件中，您可以使用

props.routes.reactServerProps

访问它

请参阅Ryan Florence最后的评论

---

他忘了那些。无法使用route。

我已经使用

props

名称空间连接了所有组件，以查找变量。是否有任何方法可以将数据作为

道具
传递？您可以尝试一下createElement方法，我在这里找到了一个实现：。尽管如此，我还是不确定这是从1.0版开始的。我认为，也可以使用Object
assign（）
方法将数据直接注入到
renderProps
中，尽管这感觉很粗糙。ie）
assign（renderProps.params，reactServerProps）
@ThomasReggi好消息，似乎将值作为props传递给所有子级而不是上下文仍然是完全可行的。更新了答案以进行说明。谢谢，我将不得不对此进行更深入的研究！我有个问题。例如，props.query会闪烁一秒钟，然后消失。。怎么了？
// Grab the data from wherever you need then pass it to your <DataWrapper /> as a prop 
// which in turn will pass it down to all it's children through context
res.status(200).send(renderToString(<DataWrapper data={data}><RouterContext {...renderProps} /></DataWrapper>))

export default class SomeChildComponent extends React.Component {

constructor (props, context) {

    super(props, context);
    this.state = {
        gaKey: context.data.gaKey,
        query: context.data.query
    };
}

};

function createElementFn(serverProps) {
  return function(Component, props) {
    return <Component {...serverProps} {...props} />
  }
} 

res.status(200).send(renderToString(<RouterContext {...renderProps} createElement={createElementFn(serverProps)} />)) 

props.routes.reactServerProps = {
'gaKey': process.env.GA_KEY,
'query': req.query
}