Как использовать новые функциональные хуки в React? - PullRequest
Новая
       20

Как использовать новые функциональные хуки в React?

0 голосов
/ 26 октября 2018

Я только что прочитал о новых функциональных хуках реагирования. Читал о хуках , но я не могу его использовать.это дает мне ошибку.

В настоящее время я использую версию 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 response @ next response-dom@next.

Спасибо

Ответы [ 2 ]

0 голосов
/ 20 ноября 2018

Вы должны использовать версию 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>
0 голосов
/ 26 октября 2018

РЕДАКТИРОВАТЬ:

Хуки выпускаются как часть версии 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: Ошибка объекта (…) не является функцией »при попытке использовать крючки (альфа) * ​​1025 *

...