ReactJS, предоставляющий inst.render, не является функциональной ошибкой

Я показывал действительно простой Hello World с React и ReactDOM, когда у меня возникла странная ошибка Uncaught TypeError: inst.render is not a function. См. Это в JSBin.

Я использовал React много, но новый для ES6. Любые идеи, что я не вижу здесь?

Ошибка, кажется, говорит о том, что Hello не имеет метода render, но я не уверен.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="
               https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.4/redux.js" type="text/javascript"></script>
  <script src="https://fb.me/react-0.14.0.js"></script>
  <script src="https://fb.me/react-dom-0.14.0.js"></script>
</head>
<body>
  <div id="root"></div>

  <script>
const Hello = () => {
  <h1>Hi</h1>
};

const foo = () => {
  ReactDOM.render(
    <Hello />,
    document.getElementById('root')
  );  
}

foo();
</script>
</body>
</html>

Ответ 1

Обновление

Вы также можете использовать function или arrow в вашем случае. Однако вам нужно вернуть компонент.

const Hello = () => <h1>Hi</h1>;

Обратите внимание на отсутствие фигурных скобок. В ES6 функция без фигурных скобок возвращает результат его выражения тела.

Оригинал

Чтобы использовать React с ES6, вам нужно наследовать класс React.Component.

class Hello extends React.Component {
  render() {
    return <h1>Hi</h1>
  }
}

Смотрите здесь в своей документации.

Ответ 2

Я столкнулся с этой ошибкой, когда компонент, который я показывал, был undefined. Я никогда не видел ошибку раньше. Мое приложение также использовало редукцию.

В моем случае это был только компонент <Book /> в методе render(), который не был определен.

Итак, исправление было простым:

import Book from './Book'

Мой совет, если вы столкнулись с этой проблемой, - это проверить метод рендеринга компонента контейнера и посмотреть, не определены ли какие-либо компоненты, которые вы пытаетесь выполнить.

Мне кажется очень странным, он должен дать следующую ошибку:

Неподготовлено (в обещании) ReferenceError: Книга не определена

Ответ 3

Я получил эту ошибку, потому что я случайно вызывал return someObj в моем компоненте constructor. Как только я удалю его, проблема решена.

Ответ 4

Другим решением является использование неявного возврата. Просто оберните возврат компонента Hello в скобки вместо скобок, например (JSBin)

const Hello = () => (
  <h1>Hi</h1>
);

Ответ 5

Я получил эту ошибку, когда я добавил ключевое слово статическое в компонент App по рекомендации webstorm/lint. Попробуйте удалить ключевые слова статические. static App extends Component {...

Ответ 6

Просто имейте в виду, что каждый созданный вами компонент реакции должен что-то возвращать. И если это класс, убедитесь, что в вашем классе есть функция render.

Ответ 7

В моем случае это произошло из-за того, что я не включил функцию рендеринга в свой компонент (даже если мне не нужно было отображать какие-либо элементы) - похоже, что возвращение нулевого значения работает:

# does not work
class BarChart extends Component {

}

# works
class BarChart extends Component {

    render() {
        return null;
    }
}

Ответ 8

const Hello = () => {
  <h1>Hi</h1>
};

это разница от

const Hello = () => (
  <h1>Hi</h1>
);