無法呈現第二個React組件

Question

我只是想讓我做出一個簡單的網站。 所以這是代碼

<html>
<head>
  <script src="https://fb.me/react-0.13.3.js"></script>
  <!-- In-browser JSX transformer, remove when pre-compiling JSX. -->
  <script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
  <link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">    
</head>
<body>
    <div class="container"></div>
</body>
<script type="text/jsx">

    var Header = React.createClass({
        render: function(){

            return (<div >
                    <div className="page-header">
                        <h1>{this.props.big} <small>{this.props.small}</small></h1>
                    </div>
                </div>);
        }
    });

var options = {
    big: "React.js is awesome",
    small: "It's strict"
};


var headerComponent = React.createElement(Header, options);
React.render(headerComponent, document.querySelector('.container'));

</script>

這很好。 每當我嘗試添加新組件時，第39行都會出現解析錯誤。我不明白為什么

這是我添加的組件代碼

<script type="text/jsx">
    var Vamsi = React.createClass({
        render: function(){
            return ({
                    <div> 
                        Hi 
                    </div>
            });
        };
    });

    var Header = React.createClass({
        render: function(){

            return (<div >

                    <div className="page-header">
                        <h1>{this.props.big} <small>{this.props.small}</small></h1>
                    </div>
                    <Vamsi />

                </div>);
        }
    });

var options = {
    big: "React.js is awesome",
    small: "It's strict"
};


var headerComponent = React.createElement(Header, options);
React.render(headerComponent, document.querySelector('.container'));

</script>
</html>

ps：我添加了一個名為Vamsi的組件，並且在第8行出現了解析錯誤和預期的令牌

Answer 1

在return方法中，您有多余的花括號，不需要{ } ，這些花括號將被視為對象。 該方法要求您返回一個方法而不是對象。 同樣，createClass接受對象，因此每個方法都應以逗號分隔。

var Vamsi = React.createClass({
    render: function(){
        return (<div> 
                    Hi 
                </div>
        );
    }
});

無法呈現第二個React組件

問題描述

1 個解決方案

解決方案1
1 已采納 2015-06-23 10:47:09

無法呈現第二個React組件

問題描述

1 個解決方案

解決方案1 1 已采納 2015-06-23 10:47:09

解決方案1
1 已采納 2015-06-23 10:47:09