gpt4 book ai didi

preact - 如何使用 html 和脚本标签使用 preact?

转载 作者:行者123 更新时间:2023-12-04 01:51:20 30 4
gpt4 key购买 nike

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

如何在保持相同结构的同时将其转换为预执行?

我试着关注 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>

最佳答案

根据这个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>

关于preact - 如何使用 html 和脚本标签使用 preact?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52883886/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com