Question

我是ReactJS的新手并在线学习一些样本练习。无法在浏览器上呈现简单标记。有一个没有意义的未捕获的语法错误。

我只返回1个标签，这是本论坛中React相关问题报告的唯一嵌套问题。你能帮我解决这个问题。

以下代码

/** @jsx React.DOM */
var MySelect = React.createClass({
    getInitialState: function(){
      return {
        selected:false
      };

    }
    render: function(){
        var mySelectStyle = {
            border: '1px solid #999',
            display: 'inline-block',
            padding: '5px'
        };
        return ( //react div element, via JSX, containing <MyOption> component
            <div style={mySelectStyle}>
                <MyOption value="Volvo"></MyOption>
                <MyOption value="Saab"></MyOption>
                <MyOption value="Mercedes"></MyOption>
                <MyOption value="Audi"></MyOption>
            </div>
        );
    }
});

var MyOption = React.createClass({  
 /*  render: function(){
        return <div> {this.props.value} </div> ; 
    } */ 
 }); 
ReactDOM.render(<MySelect />, document.getElementById('app'));
</script>
</body>
</html>

Answer 1

您需要通过,将功能分开。还要确保使用babel to transpile your jsx code.

var MySelect = React.createClass({

    getInitialState: function(){
      return {
        selected:false
      };

    },

    render: function(){
        var mySelectStyle = {
            border: '1px solid #999',
            display: 'inline-block',
            padding: '5px'
        };
        return ( //react div element, via JSX, containing <MyOption> component
            <div style={mySelectStyle}>
                <MyOption value="Volvo"></MyOption>
                <MyOption value="Saab"></MyOption>
                <MyOption value="Mercedes"></MyOption>
                <MyOption value="Audi"></MyOption>
            </div>
        );
    }
});

var MyOption = React.createClass({  

   render: function(){
        return <div> {this.props.value} </div> ; 
    } 
 }); 

ReactDOM.render(<MySelect />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Answer 2

MyOption组件在这里没有返回任何内容。可能是错误的原因。

未捕获的错误：解析错误：第13行：意外的标识符

2 个答案: