BinaryDevelop
  1. ホーム
  2. reactjs

[解決済み] ReactJS で inst.render が関数でないエラーが発生する

2022-02-17 05:50:04

質問

ReactとReactDOMを使って本当に基本的なHello Worldを表示していたところ、奇妙なエラーが発生しました。 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>

解決方法は？

オリジナル

ReactをES6で使用するためには、ES6を継承する必要があります。 React.Component クラスがあります。 

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

参照 こちら のドキュメントを参照してください。

更新情報

また function または arrow を使用します。ただし、コンポーネントを返す必要があります。 

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

中括弧がないことに注意してください。ES6では 矢印機能 中括弧がない場合は、本体式の結果を返します。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します