Question

我试图渲染一个反应组件，但我得到的是我身体中的脚本标签，这是我的代码可以有人帮助我，当我尝试渲染我得到以下响应

var App =  React.Component({
    render () {
        return (
            <div>
                <h1>App</h1>
                <RouteHandler/>
            </div>
        )
    }
});




var routes = (
    <Route handler={App}>
    </Route>
);

Router.run(routes, Router.HashLocation, function(Root, state) {
    React.render(<Root location={state.path}/>, document.body)
});

<html><head>
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>Hello World</title>
    </head>
    <body><script data-reactid=".0"></script>

</body></html>

Answer 1

我正在催促您使用React 0.13.x，因为您没有使用ReactDOM.render。另外，我正在压制你正在使用ReactRouter＆lt; V1.0.0，因为您没有将路由器用作jsx元素。

要解决您的问题，请更改：

var App =  React.Component({
    render () {
        return (
            <div>
                <h1>App</h1>
                <RouteHandler/>
            </div>
        )
    }
});

要：

var App =  React.createClass({
    render () {
        return (
            <div>
                <h1>App</h1>
                <RouteHandler/>
            </div>
        )
    }
});

这是一个工作小提琴： React + ReactRouter example

body

1 个答案: