Ссылки на CDN для пакетов React и как их импортировать при использовании реакции с использованием скриптов из CDN - PullRequest
Новая
       8

Ссылки на CDN для пакетов React и как их импортировать при использовании реакции с использованием скриптов из CDN

3 голосов
/ 21 января 2020

Я пробовал React без NPM и других инструментов и вместо этого использовал его, добавляя ссылки CDN, но как импортировать зависимые пакеты, например, ловушку useState? Если он добавлен с помощью другого тега сценария, что является ссылкой CDN для того же самого? ниже мой код, 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>React Local</title>
  <script type="application/javascript" src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"></script>
  <script type="application/javascript" src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.production.min.js"></script>
  <script type="application/javascript" src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head>

<body>
  <div id="root"></div>

   <script type="text/babel">
    const rootElement = document.getElementById('root') 

    const App = (props) => { 
    const [text, setText] = useState('hello'); 
        return (
            <div>
            <h1>{text}</h1>
            <input type="text" onClick={(e) => setText(e.target.value)}> </input>
            </div>
        );
    }

    ReactDOM.render(<App />, rootElement)
  </script>

</body>
</html>

Здесь я получу сообщение об ошибке, useState не определено.
Примечание. Это просто для проверки React с использованием сценариев из CDN, непосредственно добавленных в Файл html, хотя я знаю о приложении create-реагировать и современных инструментах

1 Ответ

5 голосов
/ 21 января 2020

Когда вы используете скрипты, React отображается на объекте окна как React, вы также используете версию React, которая не имеет хуков (хуки были выпущены в 16.8)

Обновите ваши скрипты до (вы можете использовать сценарии разработки для улучшения сообщений об ошибках) 

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

Если вы хотите получить доступ к useState, деструктурируйте его из React или используйте React.useState

Также, используйте onChange вместо onClick для событий изменения входа, а также используйте значение text из состояния в качестве value входа 

<script type="text/babel">
  const { useState } = React

  const App = (props) => { 
    const [text, setText] = useState('hello');

    return (
      <div>
        <h1>{text}</h1>
        <input type="text" value={text} onChange={(e) => setText(e.target.value)} />
      </div>
    );
  }

  const rootElement = document.getElementById('root')
  ReactDOM.render(<App />, rootElement)
</script>
...