Question

我是编程的新手，并开始做我发现的练习

我一直在尝试构建这个exercise，但是我没有得到这个错误，有帮助吗？

未捕获错误：解析错误：第16行：XJS值应该是表达式或带引号的XJS文本（...）

<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>
<!-- DOCTYPE HTML -->
<html>
<head>
<title>Your First React Project</title>
</head>
<body>
<div id="content"></div>
<script src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xfp1/t39.3284-6/12512166_196876483993243_981414082_n.js"></script>
<script src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xfa1/t39.3284-6/12512184_1664789273772979_614489084_n.js"></script>
<script src="http://dragon.ak.fbcdn.net/hphotos-ak-xfp1/t39.3284-6/10734305_1719965068228170_722481775_n.js"></script>
<script type="text/jsx">
/*Add your React code here*/


var DATA = {
    name: 'John Smith',
    imgURL: 'http://lorempixel.com/100/100/',
    hobbyList: ['coding', 'writing', 'skiing']
};


var App = React.createClass({
  render: function(){
    return (
        <div>
          <Profile name=this.props.profileData.name imgURL=this.props.profileData.imgURL/>
          <Hobbies hobbyList=this.props.profileData.hobbyList/>
        </div>
    );
  }
});

var Profile = React.createClass({
  render: function(){
    return(
      <div>
      <h3> {this.props.name} </h3>
      <img src={this.source.imgURL} />

      </div>
    );
  }
});

var Hobbies = React.createClass({
  render: function(){
    var hobbies = this.props.hobbyList.map(function(hobby,index) {

      return (
        <div>
          <h5>My Hobbies:</h5>
          <ul>{hobbies}</ul>
        </div>
      )
    }
  );

  }
});


ReactDom.render(<App profileData={DATA}/>, document.getElementById('content'));


</script>
</body>
</html>

Answer 1

好的，有几件事：

你忘记了一些道具周围的花括号。因此，您需要<Profile name=this.props.profileData.name />而不是<Profile name={this.props.profileData.name} />。这导致了你在这个问题的标题中提到的错误。
不确定为什么在Profile组件中使用了this.source。返回undefined。相反，请使用您已传递的道具（this.props.imgURL）。
在Hobbies组件中，您的迭代不是100％正常工作。尝试只迭代<li>元素（您的爱好），然后将它们放在下面的ul标记中。

我修复了代码的这些部分，并希望这会有所帮助。这只是小事，没什么大不了的。玩得开心！

var DATA = {
  name: 'John Smith',
  imgURL: 'http://lorempixel.com/100/100/',
  hobbyList: ['coding', 'writing', 'skiing']
};


var App = React.createClass({
  render: function(){
    return (
      <div>
      <Profile name={this.props.profileData.name} imgURL={this.props.profileData.imgURL}/>
      <Hobbies hobbyList={this.props.profileData.hobbyList}/>
      </div>
    );
  }
});

var Profile = React.createClass({
  render: function(){
    return(
      <div>
      <h3>{this.props.name}</h3>
      <img src={this.props.imgURL} />
      </div>
    );
  }
});

var Hobbies = React.createClass({
  render: function(){
    var hobbies = this.props.hobbyList.map(function(hobby, index) {
      return <li>{hobby}</li>;
    });
    return (
      <div>
      <h5>My Hobbies:</h5>
      <ul>{hobbies}</ul>
      </div>
    );
  }
});


ReactDOM.render(<App profileData={DATA}/>, document.getElementById('content'));

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

XJS值应该是表达式或带引号的XJS文本

1 个答案: