"левая сторона оператора запятой.." ошибка в содержании html рендера

Его простой процесс;

Вот метод рендеринга начала, которым я хочу его (я хочу, чтобы моя таблица была вне div):

но компилятор jsx не позволяет это по какой-то причине?

но если я перемещаю таблицу внутри элемента div; все выглядит нормально.

так что только diff - это место таблицы. почему jsx мешает этому процессу? почему это необходимо?

Ответ 1

В JSX мы можем вернуть только один элемент html из return, не можем возвращать несколько элементов, если вы хотите возвратить несколько элементов, затем оберните весь код html в div или любым другой компонент оболочки.

То же самое происходит в вашем первом случае, вы возвращаете 2 элемента, один div и один table. когда вы обертываете их в один div, все работает правильно.

Те же правила, которые вы должны соблюдать для conditional rendering компонентов.

Пример:

Правильно:

{ 1==1 /* some condition */ ? 
    <div>
        True
    </div> 
: 
    <div>
        False
    </div>
}

Неверно:

{ 1==1 /* some condition */ ? 
    <div>
        True 1
    </div>
    <div>
        True 2
    </div> 
: 
    <div>
        False 1
    </div>
    <div>
        False 2
    </div>
}

Ответ 2

Просто быстрое обновление. Если вы используете React v16.2.0 и выше, вы также можете использовать фрагменты.

  return (
    <>
        <div>
            True 1
        </div>
        <div>
            True 2
        </div> 
    </>
  );

Я также ответил на аналогичный вопрос, более подробно здесь

Ответ 3

Другая причина этой ошибки - случайное завершение строки запятой вместо точки с запятой, это может произойти из-за ошибки при рефакторинге кода.

Они дают ошибки

return <div>hi</div>, // error
return (<div>hi</div>,) // error

Это правильно:

return <div>hi</div>; // ok
return (<div>hi</div>) // ok
return (<div>hi</div>); // ok

Эта ошибка в данном случае более смущает, поскольку она выделяет весь блок JSX вместо запятой