•  21-12-2019
  •  | 
  •  

문제

Reactjs와 함께 작동하는 방법을 알고 있습니다.

브라우저 콘솔에서 오류가 발생했습니다.내 코드가 아래에 있습니다.npm react-router를 설치하고 라우터 코드가없는 대응 앱에 대해 잘 작동하는 Basic Server i.e. python -m SimpleHTTPServer 3000를 사용했습니다.

콘솔의 오류는 Uncaught Error: Parse Error: Line 18: Unexpected token . <this.props.activeRouteHandler/>

내 app.js가 대응 라우터 모듈을 찾을 수 없지만 requirejs 문제를 찾을 수 없다고 생각합니다 (내 인덱스에서 CDN을 포함합니다) ??? 

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

index.html 

<!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>
.

app.js 

/** @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);
.

도움이 되었습니까?

해결책

React-Router 0.5로 업그레이드했을 때 동일한 문제가 있었고 React 0.11을 반응 시켰습니다.나는 {this.props.ActiverouteHandler ()}로 바뀌었고, 그것은 작업을 시작했다.나는 이것을 "todo"로 표시 할 것입니다.

당신이 무엇을하든, 포기하지 마십시오.그것은 훌륭하게 작동합니다!우리는 이전에 백본 라우터를 사용하고 있었고이 반응 라우터는 우리의 오래된 설정에 비해 그러한 축복입니다!

디렉토리 설정을 사용하면 "요구 사항 ( '반응')"을 변경하고 브라우 맨화를 사용하여 앱을 사용하여 단일 JS 자산으로의 종속성을 사용합니다.그 밖의 모든 것은 좋아 보인다.

다른 팁

JSX의 네임 스페이스 지원이 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