الحصول على خطأ تحليل <this.props.activeRouteHandler />

StackOverflow https://stackoverflow.com//questions/25028188

  •  21-12-2019
  •  | 
  •  

سؤال

تعرف على كيفية الحصول على رد فعل جهاز التوجيه العمل مع رد الفعل?

انها رمي الأخطاء في وحدة تحكم المتصفح بالنسبة لي.رمز بلدي أدناه.أنا ركبت npm react-router واستخدام خادم أساسي أي. python -m SimpleHTTPServer 3000 الذي يعمل بشكل جيد لتطبيق رد الفعل الذي لا يحتوي على رمز جهاز التوجيه.

خطأ في وحدة التحكم هو Uncaught Error: Parse Error: Line 18: Unexpected token . <this.props.activeRouteHandler/>

أعتقد أن هذا التطبيق الخاص بي.شبيبة لا يمكن العثور على وحدة رد فعل جهاز التوجيه ، ولكن ربما قضية ريكيرجس (أنا إدراجه من كدن في فهرس بلدي)???

Directories
/index.html
/scripts/app.js
/node_modules/react-router

فهرس.أتش تي أم أل

<!DOCTYPE html>
<html>
  <head>
    <title>Hello React</title>
    <script src="http://fb.me/react-0.10.0.js"></script>
    <script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.js"></script>

  </head>
  <body>
    <div id="content"></div>
    <script type="text/jsx" src="scripts/app.js"></script>

  </body>
</html>

التطبيق.شبيبة

/** @jsx React.DOM */

var Routes = require('../node_modules/react-router/modules/main').Routes;
var Route = require('../node_modules/react-router/modules/main').Route;
var Link = require('../node_modules/react-router/modules/main').Link;

var About = React.createClass({
  render: function() {
    return <h2>About</h2>;
  }
});

var Users = React.createClass({
  render: function() {
    return (
      <div>
        <h2>Users</h2>
        <this.props.activeRouteHandler/>
      </div>
    );
  }
});

var User = React.createClass({
  render: function() {
    return <div>{this.props.params.userId}</div>
  }
});

var App = React.createClass({
  render: function() {
    return (
      <div>
        <ul>
          <li><Link to="about">About</Link></li>
          <li><Link to="users">Users</Link></li>
          <li><Link to="user" userId="123">User 123</Link></li>
        </ul>
        <this.props.activeRouteHandler/>
      </div>
    );
  }
});

React.renderComponent((
  <Routes>
    <Route handler={App}>
      <Route name="about" handler={About}/>
      <Route name="users" handler={Users}>
        <Route name="user" path="/user/:userId" handler={User}/>
      </Route>
    </Route>
  </Routes>
), document.body);
هل كانت مفيدة؟

المحلول

واجهت نفس المشكلة عندما قمت بالترقية إلى جهاز التوجيه التفاعلي 0.5 وكنت حتى أستخدم رد الفعل 0.11.لقد غيرت إلى {هذا.الدعائم.أكتيفيروتهاندلر ()} وبدأت العمل.أنا وضعت هذا على أنه" تودو " للنظر في الرغم من.

بغض النظر عما تفعله ، لا تستسلم.إنه يعمل بشكل رائع!كنا نستخدم العمود الفقري جهاز التوجيه قبل وهذا رد فعل جهاز التوجيه هو مثل نعمة بالمقارنة مع الإعداد القديم لدينا!

أيضا مع إعداد الدليل الخاص بك يمكنك تغيير يتطلب الخاص بك لمجرد "تتطلب('رد فعل')" واستخدام بروزريفي لبناء التطبيق الخاص بك والتبعيات المطلوبة في الأصول جس واحد.كل شيء آخر يبدو جيدا.

نصائح أخرى

تم تقديم دعم مساحة الاسم في جسكس في رد فعل 0.11.0.لديك 0.10.0.قم بتغيير علامات البرنامج النصي لاستخدام 0.11.0.

<script src="http://fb.me/react-0.11.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.11.0.js"></script>

مع 0.10.0 وأدناه كنت قد فعلت هذا:

var activeRouteHandler = this.props.activeRouteHandler;
return <activeRouteHandler />
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top