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>
        );
    }
});

无法渲染第二反应组分

1 个答案: