如何在 React 中使用新的 Feature Hooks？

Question

我剛剛閱讀了 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 安裝。

謝謝

Answer 1

編輯：

掛鈎是16.8.0版的一部分，您可以通過安裝React和React-dom 16.8.0來使用它

跑

yarn install react@16.8.0 react-dom@16.8.0

安裝。 為了升級反應到最新版本

yarn upgrade react react-dom

---

掛鈎在16.6.0版本中不存在，但是是對16.7.0版本的建議。 但是，您可以使用16.7.0-alpha.0 alpha版本進行測試

為了使用此安裝上述版本使用

yarn add react@next react-dom@next

確保您同時安裝了react和react-dom ，否則將收到警告，例如

嘗試使用React Hooks（Alpha）時出現TypeError：Object（…）不是函數”錯誤

Answer 2

您必須使用版本16.7.0-alpha.0 （或更高版本）進行react和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/react@16.7.0-alpha.0/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script> <div id="app"></div>