如何使用 html 和 script 标签使用 preact？答案

【问题标题】：How to use preact using html and script tag?如何使用 html 和 script 标签使用 preact？
【发布时间】：2019-03-23 20:17:06
【问题描述】：

我有一个非常简单的 react 程序，它使用脚本命令和 cdn 导入 react。

如何在保持相同结构的同时将其转换为 preact？

我尝试按照these 的说明进行操作，但他们不是很清楚

<!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>

【问题讨论】：

标签： preact

【解决方案1】：

根据github issue，您有几个不同的选项可以使用带有脚本标签的 Preact。您可以直接调用h- Preact 的React.createElement 版本，或者您可以使用 babel 独立来转换您的 JSX，就像您在原始 React 示例中一样。这是原始示例的 Preact 转换。

<!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>

【讨论】：