Question

我刚刚了解了React的新功能挂钩。Read about hooks 但我无法使用它。它给了我错误。

我当前正在使用版本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版本的React进行测试

要使用此版本，请使用

安装上述版本

yarn add react@next react-dom@next

请确保同时安装react和react-dom，否则会收到类似

的警告

TypeError：尝试使用react时，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>

如何在React中使用新的功能挂钩？

2 个答案: