Question

一个新的React用户在这里尝试学习绳索。我正在使用节点和反应来处理一个小的同构测试应用程序。我可以通过使用React.renderToString（）并将其传递到手柄模板来获取主要父组件。

但是孩子ReactComponent并没有加载。嗯，它确实......但只有一毫秒才消失。它几乎就像应用程序初始化状态我喜欢，但在加载后立即清除它。

以下是相关代码及简要说明：

StreamRApp.react.js

这是主要的反应组件，在其render（）函数中包含另一个ReactComponent。

/** @jsx React.DOM */

var React = require('react'),
    Track = require('./Track.react');

module.exports = StreamRApp = React.createClass({

  getInitialState: function() {
    return {
      initialTracks: [
        {
          id: 1,
          artist: 'bob',
          title: 'this is a great song'
        },
        {
          id: 2,
          artist: 'mary',
          title: 'this song sucks'
        }
      ],
      tracks: []
    }
  },

  componentWillMount: function() {
    this.setState({ tracks: this.state.initialTracks })
  },

  render: function() {

    return (
      <div>
        Hello
        <div>
          <Track tracks={this.state.tracks}/>
        </div>
      </div>
    );

  }

});

非常简单。我用一些轨道初始化这个组件状态，并将它传递给渲染函数中的组件：

Track.react.js

/** @jsx React.DOM */

var React = require('react');

module.exports = Track = React.createClass({

  render: function() {
    return (
      <ul>
      {
        this.props.tracks.map(function(track) {
          return <li className="track" key={track.id}>{track.artist} - {track.title}</li>
        })
      }
      </ul>
    )
  }

});

Routes.js

在我的页面路径代码中，我将主要组件渲染为字符串，并将其传递到我的手柄视图中：

module.exports = {

  index: function(req, res) {

  var markup = React.renderToString(StreamRApp({}));

  res.render('home', { markup: markup });

  }

};

任何人都知道为什么会这样？就像我在开始时解释的那样，它似乎能够在短时间内正确地渲染轨道，但有些东西可以清除它吗？

嵌套的React组件未显示（大部分时间）

0 个答案: