Синтаксическая ошибка «Неожиданный токен, ожидаемый}» выдается после попытки рендеринга JSX внутри функции обратного вызова - PullRequest
Новая
       15

Синтаксическая ошибка «Неожиданный токен, ожидаемый}» выдается после попытки рендеринга JSX внутри функции обратного вызова

0 голосов
/ 26 октября 2018

В следующем фрагменте кода я перебираю свойства объекта (в данном случае PADS), используя метод lodash library map. Он принимает объект и функцию обратного вызова в качестве аргументов.

Еще одно упоминание о том, что я пытаюсь включить функции начальной загрузки с дочерним компонентом реагирования. 

let count = 0;
let countCount = 0;
const drumPadItems = _.map(PADS, padElem => {
    count++;
    countCount++;

    if(countCount === 1){
      return (
        <div className="row">
        <DrumPad letter={padElem.letter} url={padElem.url}/>
      );
    }

    if(count > 3){
      count = 1;
      return (</div><div className="row"><DrumPad letter={padElem.letter} url={padElem.url}/>
      );
    }

    if(countCount === 9){
        return (
          <DrumPad letter={padElem.letter} url={padElem.url}/>
          </div>
        );
    }

    return <DrumPad letter={padElem.letter} url={padElem.url}/>;
});

Когда я запускаю приложение, я получаю следующую ошибку компиляции: 

ERROR in ./src/components/drum_pad_list.js
Module build failed: SyntaxError: Unexpected token, expected } (76:19)
 if(count > 3){
  count = 1;
           ^
  return (</div><div className="row"><DrumPad letter={padElem.letter} url={padElem.url}/>
 );
}

EDIT:

Объект PADS имеет следующую структуру: 

{
    q: {
        label: "Label1",
        letter: "Q",
        url: "https://..."
    },
    w: {
        label: "Label2",
        letter: "W",
        url: "https://..."
    }
    ...
}

Желаемый результат будет выглядеть примерно так: 

<div className="row">
  <DrumPad letter='Q' url='https://...'/>
  <DrumPad letter='W' url='https://...'/>
  <DrumPad letter='E' url='https://...'/>
</div>

Каким было бы решение для этого?

Ответы [ 2 ]

0 голосов
/ 26 октября 2018

1) Вы пропали без вести </div>

 if(countCount === 1){
  return (
    <div className="row">
      <DrumPad letter={padElem.letter} url={padElem.url}/>
    </div> {/* DIV MISSING */}
  );
}

2) Слишком много <div>

if(count > 3){
  count = 1;
  return (
    </div> {/* TOO MUCH DIV */}
    <div className="row">
      <DrumPad letter={padElem.letter} url={padElem.url}/>
    </div> {/* DIV MISSING */}
  );
}

3) Вы пропали без вести </div>

if(countCount === 9){
    return (
      <div> {/* DIV MISSING */}
         <DrumPad letter={padElem.letter} url={padElem.url}/>
      </div>
    );
}

JSX хочет, чтобы вся разметка возврата была в одном контейнере, например return(<div>...</div>);

Я считаю, что есть другой способ сделать то, что вы хотите, если вы нам это объясните

0 голосов
/ 26 октября 2018

Ваш JSX неполный, так как нет закрытия </div>.У вас есть несколько неполных JSX, и вы не можете «конкатить» частичный JSX.Это исправит первое: 

<div className="row">
  <DrumPad letter={padElem.letter} url={padElem.url} />
</div>

Чтобы отобразить 9 ваших элементов, вы можете сделать это (реквизит key должен быть уникальным и необходим для учета React): 

// use capitalize for function name
const DrumPadItems = () => (
  <div className="row">
    {
      Object.values(PADS)
        .slice(0, 9)
        .map(padElem => <DrumPad 
          letter={padElem.letter} 
          url={padElem.url} 
          key={padElem.letter} />)
    }
  </div>
)

Это «выдаст» список: 

<div className="row">
  <DrumPad />
  <DrumPad />
  ...
</div>
...

Я бы порекомендовал использовать деструктуризацию объектов и сделать PADS опорой, а затем вы можете использовать его следующим образом: 

const DrumPadItems = ({PADS}) => (
  <div className="row">
    {
      Object.values(PADS)
        .slice(0, 9)
        .map(({letter, url}) => <DrumPad 
          letter={letter} 
          url={url} 
          key={letter} />)
    }
  </div>
)


// somewhere else
<div>
  <DrumPadItems PADS={this.state.PADS} />
  <OtherStuff />
</div>

Кстати: вам не нужен lodash при условии, что PADS является массивом.

...