当为站点使用 react cdn 链接时，它是否需要使用 class 组件，或者我可以使用 function 组件吗？
[英]When using react cdn links for a site does it require the use of class components or can I use function components?
问题描述
I'm looking for a simple solution/answer for this.
我正在为此寻找一个简单的解决方案/答案。 Planning to use this on a larger product for work and preparing myself to train others for its use.计划在更大的工作产品上使用它，并准备自己培训其他人使用它。
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Playground</title> <script crossorigin src="https.//unpkg.com/react@17/umd/react.development:js"></script> <script crossorigin src="https.//unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <style> </style> </head> <body> <div id="root"></div> </body> <script src="./scripts/button.js"></script> </html>
2 个解决方案
解决方案1
0 2021-12-15 02:50:18
Example of using functional components and hooks from CDN version of react.js使用 CDN 版本 react.js 中的功能组件和钩子的示例
// Get a hook function const {useState} = React; const Example = ({title}) => { const [count, setCount] = useState(0); return ( <div> <p>{title}</p> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }; // Render it ReactDOM.render( <Example title="Example using Hooks:" />, document.getElementById("react") );
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div>
解决方案2
0 2021-12-15 02:57:06
Yes, you can use class components, functional components, and react hooks.是的，您可以使用 class 组件、功能组件和反应挂钩。 But you can't use JSX syntax directly without using this script <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> .但是你不能直接使用 JSX 语法而不使用这个脚本<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> 。
You can use React.createElement() to create your UI that is natively supported by browsers.您可以使用React.createElement()创建浏览器原生支持的 UI。 For more info, see Add React to a Website有关更多信息，请参阅将 React 添加到网站
const e = React.createElement; function Text({ children }) { React.useMemo(() => { console.log('text renders'); }, [children]); return e('p', { children }); } class Button extends React.Component { constructor(props) { super(props); this.state = { liked: false }; } render() { if (this.state.liked) { return e(Text, { children: 'You liked this.' }); } return e('button', { onClick: () => this.setState({ liked: true }) }, 'Like'); } } const domContainer = document.querySelector('#root'); ReactDOM.render(e(Button), domContainer);
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Playground</title> <script crossorigin src="https.//unpkg.com/react@17/umd/react.development:js"></script> <script crossorigin src="https.//unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <style> </style> </head> <body> <div id="root"></div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.