Question

我很确定这里有简单的答案。我仍然是React的新手。在DOM中，我似乎得到了我的控制台日志的值，我正在递增以跟踪其制作的传递次数（仅由此混淆）。但是这个道具在什么时候变得不确定？这是我的代码。

"use strict";
import ReactDOM from 'react-dom';
import React from 'react';

var colors = ["Red","Green","Blue","Yellow","Black","White","Orange"];
var n = 0;
function increment(){
  n++;
  return n;
}

var List = React.createClass({
  getInitialState: function() {
    console.log("SORT1::",this.props.data + "  " + increment(n));
    return {data: this.props.data};
  },
  render: function() {
    console.log("SORT2::",this.props.data + "  " + increment(n));
    return <ul>
      {this.props.data.map(function(item,i) {
        return <li key={i}>{item}</li>;
      })}
    </ul>
  }
});

ReactDOM.render( <List data={colors} />, document.getElementById('app-container'));

export default List;

以下是我的DOM的样子：

https://github.com/rafahsolis/djangosecure

以下是一些影响此问题的其他代码。我的index.js：

export MasterPage from './MasterPage'
export IndexPage from './IndexPage'
export HomePage from './HomePage'
export LoginPage from './LoginPage'
export RegisterPage from './RegisterPage'
export ResetPasswordPage from './ResetPasswordPage'
export VerifyEmailPage from './VerifyEmailPage'
export ProfilePage from './ProfilePage'
export ChangePasswordPage from './ChangePasswordPage'
export sortable from './sortable.js'

任何我的反应路由器：

import React from 'react';
import ReactDOM from 'react-dom';
import { IndexRoute, Route, browserHistory } from 'react-router';
import ReactStormpath, { Router, HomeRoute, LoginRoute, AuthenticatedRoute } from 'react-stormpath';
import { ChangePasswordPage, MasterPage, IndexPage, LoginPage, RegisterPage, ResetPasswordPage, 
VerifyEmailPage, ProfilePage, HomePage, sortable } from './pages';

ReactStormpath.init();

ReactDOM.render(
 <Router history={browserHistory}>
<HomeRoute path='/' component={MasterPage}>
 <IndexRoute component={IndexPage} /> 
  <LoginRoute path='/login' component={LoginPage} />
  <Route path='/verify' component={VerifyEmailPage} />
  <Route path='/register' component={RegisterPage} />
  <Route path='/change' component={ChangePasswordPage} />
  <Route path='/forgot' component={ResetPasswordPage} />
  <AuthenticatedRoute>
    <HomeRoute path='/home' component={HomePage} />        
  </AuthenticatedRoute>
  <AuthenticatedRoute>
    <HomeRoute path='/sortable' />        
  </AuthenticatedRoute>
  <AuthenticatedRoute>
    <Route path='/profile' component={ProfilePage} />        
  </AuthenticatedRoute>
 </HomeRoute>
  </Router>,
  document.getElementById('app-container')
 );

这是我的单页应用程序模板的html主体：

<body>
  <div id="app-container"></div>
  <script src="/js/app.js"></script>
   </body>

Answer 1

colors在您的全球范围内无法使用。

从sortable.js

ReactDOM.render（，document.getElementById（＆＃39; app-container＆＃39;））;

在您的react-router中，更新几行：

<AuthenticatedRoute>
    <HomeRoute path='/sortable' component={sortable} />        
</AuthenticatedRoute>

ReactDom.render一直在生成未定义的道具？

1 个答案: