Как использовать preact, используя HTML и скрипт тега? - PullRequest
Новая
       9

Как использовать preact, используя HTML и скрипт тега?

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

У меня есть очень простая программа реагирования, которая импортирует реакцию, используя команду сценария и cdn.

Как мне преобразовать ее в преакт, сохранив ту же структуру?

Я пытался следовать эти инструкции, но они не очень ясны 

<!DOCTYPE html>
<html>
<head>
    <title></title>
<script src="https://unpkg.com/react@15/dist/react.js"> </script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.js"></script>
</head>
<style type="text/css">

</style>
<body>
    <div id='root'></div>
    <script type="text/babel">
function T(props){
  return <h1>{props.title}</h1>
}
ReactDOM.render(<T title='welcome'/>,document.getElementById('root'))

    </script>

</body>
</html>

1 Ответ

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

В соответствии с этой проблемой Github у вас есть несколько различных вариантов использования Preact с тегом скрипта.Вы можете напрямую позвонить на h - версию Preact React.createElement или использовать Babel для преобразования JSX, как вы это делали в исходном примере React.Вот преактное преобразование вашего оригинального примера.

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/preact/7.2.0/preact.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.js"></script>
</head>
<body>
  <div id='root'></div>
  <!-- option 1: alias it -->
  <script>window.React = { createElement: preact.h }</script>
  <script type="text/babel">
    function T(props){
      return <h1>{props.title}</h1> 
    }
    preact.render(<T title="Welcome" />, document.getElementById('root'));
</script>
</body>
</html>
...