web-dev-qa-db-ja.com

Reactで新しい機能フックを使用する方法は？

反応の新しい機能フックについて読んだだけです。 フックについて読んでください 、私はそれを使用することができません。エラーが発生します。

現在、バージョン16.6.0を使用しています

最後に、フックを理解しました。

import React, {useState} from 'react';

const Fun = () => {
    const [count, setCount] = useState(0);

    return (
        <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>
          Click me
        </button>
      </div>
    );}

 export default Fun;

Funとしてインポートし、app.jsファイルで使用しました

私が犯した間違いは、React v16.7.0-alphaをインストールしなかったため、npm add react @ next react-dom @ nextを使用してインストールしたことです。

ありがとうございました

javascriptreactjsreact-hooks
16
Ram

編集：

フックはバージョン16.8.0の一部としてリリースされており、React and React-dom 16.8.0をインストールすることで使用できます

走る

yarn install [email protected] [email protected]

インストールする。アップグレードするために最新バージョンに対応する

yarn upgrade react react-dom

フックはバージョン16.6.0にはありませんが、バージョン16.7.0の提案です。ただし、React=の16.7.0-alpha.0アルファ版を使用してテストできます

これを使用するには、上記のバージョンを使用してインストールします

yarn add react@next react-dom@next

reactとreact-domの両方をインストールしてください。そうしないと、次のような警告が表示されます。

TypeError：反応フックを使用しようとするとObject（…）は関数ではありません」エラー（アルファ）

19
Shubham Khatri

フックを試すには、reactおよび16.7.0-alpha.0にバージョンreact-dom（またはそれ以上）を使用する必要があります。参照用に次のスニペットを使用します。

function App() {
  const [name, setName] = React.useState('Mary');
  return (
    <div>Name: 
      <input value={name} 
        onChange={(event) => setName(event.target.value)}
      />
      <p>{name}</p>
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id="app"></div>
3
Yangshun Tay