英文:
How to add a react component in Soft.io
问题
I'm facing a problem where I'm trying to add a React component or recode it inline HTML in softr.io and I need help, if there is any way to do it.
站内
im facing a problem where im trying to add a react component or recode it inline html in softr.io and i need help, if there is anyway to do it.
<div id="root"></div>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<!-- Load your React component. -->
<script src="states_clock.js"></script>
<!-- Example script to create a React component and render it. -->
<script>
// Define your React component.
function StatesClock() {
return <div>Hello, React!</div>;
}
// Render the component in the root element.
ReactDOM.render(<StatesClock />, document.getElementById('root'));
</script>
</body>
得分: 1
Okay, so defining JSX inside of a script tag is impossible if you do not use some sort of compiler such as babel which can "understand" JSX and compile it into regular JavaScript for the browser to understand.
First, you'll need to include babel as a script in your HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
Then you'll need to set the script type attribute to "text/babel":
<script type="text/babel">
Here is the complete, working example based on the code you provided:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test</title>
<base href="/" />
<meta name="color-scheme" content="light" />
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/assets/images/logo.png" />
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="Ionic App" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script src="states_clock.js"></script>
<script type="text/babel">
// Your React code here
function StatesClock() {
return <div>Hello, React!</div>;
}
ReactDOM.render(<StatesClock />, document.getElementById('root'));
</script>
</html>
<!-- end snippet -->
Note the console log, it is warning you that you are using [deprecated rendering code][1]. You should use [createRoot][2] instead.
[1]: https://react.dev/reference/react-dom#deprecated-apis
[2]: https://react.dev/reference/react-dom/client/createRoot
<details>
<summary>英文:</summary>
Okay, so defining `JSX` inside of a script tag is impossible if you do not use some sort of compiler such as `babel` which can "understand" `JSX` and compile it into regular `JavaScript` for the browser to understand.
First, you'll need to include babel as a script in your HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
Then you'll need to set the script `type` attribute to "text/babel":
<script type="text/babel">
Here is the complete, working example based on the code you provided:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test</title>
<base href="/" />
<meta name="color-scheme" content="light" />
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/assets/images/logo.png" />
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="Ionic App" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script src="states_clock.js"></script>
<script type="text/babel">
// Your React code here
function StatesClock() {
return <div>Hello, React!</div>;
}
ReactDOM.render(<StatesClock />, document.getElementById('root'));
</script>
</html>
<!-- end snippet -->
Note the console log, it is warning you that you are using [deprecated rendering code][1]. You should use [createRoot][2] instead.
[1]: https://react.dev/reference/react-dom#deprecated-apis
[2]: https://react.dev/reference/react-dom/client/createRoot
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论