Блог

Главная - Вопросы по программированию - Значение XJS должно быть либо выражением, либо текстом XJS в кавычках

Значение XJS должно быть либо выражением, либо текстом XJS в кавычках

#reactjs

#reactjs

Вопрос:

Я очень новичок в программировании и начал выполнять упражнения, которые я нашел

Я пытался выполнить это упражнение, но нет, я продолжаю получать эту ошибку, помогите?

Неперехваченная ошибка: Ошибка синтаксического анализа: Строка 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>

Ответ №1:

Хорошо, пара вещей:

  1. Вы забыли фигурные скобки вокруг некоторых реквизитов. Итак, вместо <Profile name=this.props.profileData.name /> вы хотите <Profile name={this.props.profileData.name} /> . Это было причиной ошибки, о которой вы упомянули в заголовке этого вопроса.

  2. Не уверен, почему вы использовали this.source в компоненте Profile. Это возвращает значение undefined. Вместо этого используйте prop, который вы уже передали ( this.props.imgURL ).

  3. В компоненте Хобби ваша итерация работает не на 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>

Комментарии:

1. Большое спасибо, Фабиан! Я действительно не знаю, откуда я взял источник, и я должен был быть более осведомлен о {}, и хобби внезапно выглядит таким ясным, не должен был пропустить это

2. Рад, что смог помочь. Если мой ответ решил вашу проблему, установите большой флажок, чтобы принять его в качестве ответа.