Question

我有一个server.js文件，它应该从服务器获取一些数据并将其保存在名为customP的对象中。为了让事情变得更容易，我正在尝试传递一个常量字符串以及RouterContext renderProps：

server.js

markup = renderToString(<RouterContext {...renderProps} createElement={(Component, props) => {return <Component customP={"boaz"} {...props} />;}} />);

return res.render('index', {markup});

index.ejs

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vetevo dashboard</title>
    <link rel="stylesheet" href="/css/style.css">
  </head>
  <body>
    <div id="main"><%- markup -%></div>
    <script src="/js/bundle.js"></script>
  </body>
</html>

routes.js

const routes = (
  <Route path="/dashboard" component={Layout}>
    <IndexRoute foo="bar" component={DashboardPage}/>
    <Route path="*" component={NotFoundPage}/>
  </Route>
);

最后是最重要的部分： DashboardPage Component

  constructor(props) {
    super(props);
    console.log(props.customP);
  }

  render() {
    //console.log(this.props);
    return (
      <div className="dashboard">
        <h2>This is the component: {this.props.customP}</h2>
        <h1>SA</h1>
      </div>
    );
  }

奇怪的是，customP prop显示了一毫秒然后消失了。不仅如此 - 我在构造函数中的console.log中获得了正确的值。我认为这导致了另一个渲染发生或者渲染正在破碎的结论。我找不到原因，但componentDidMount（）也没有响应。

更新

console.log适用于componentDidMount（），但道具和状态在那里是未定义的，而在构造函数中的console.log中，它们看起来完全正确......

任何帮助都将不胜感激。

快速发送自定义道具到React导致道具闪现并在渲染时消失

0 个答案: