Question

我正在努力学习React，但这让我陷入困境：

    <script type="text/jsx">
        var Avatar = React.createClass({
            render: function(){
                return {
                    <div>
                        <img src={this.props.path}>
                    </div>
                }
            }
        });

        React.render(<Avatar path="img"/>, document.body);       
    </script>

我一直收到这个错误：

Uncaught Error: Parse Error: Line 5: Unexpected token <
    at http://localhost:420/

<div>
^

我已经尝试将它包装在另一个div或span中但没有任何效果我做错了什么？

Answer 1

你应该返回JSX，但是你要返回一个不能包含JSX的对象。

var Avatar = React.createClass({
  render: function(){
    return ( // note a parenthesis, not a brace 
      <div>
        <img src={this.props.path}>
      </div>
    ); // same
  }
});

Answer 2

在React中，必须根据this，

关闭所有代码在JSX中，<MyComponent />单独有效，而<MyComponent>不是。

在您的情况下，您会错过img的贴近标记。尝试使用：

<img src={this.props.path} />

React JSX解析器错误

2 个答案: