我有一个非常简单的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>
答案 0 :(得分:2)
根据此github issue,对于使用带有脚本标记的Preact,您有两个不同的选择。您可以直接调用h
-Preact的React.createElement
版本,也可以像使用原始React示例一样,使用babel Standalone来转换JSX。这是原始示例的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>