5.jsx:样式绑定.html 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>Document</title>
  8. <script src="../../babel.min.js"></script>
  9. <script src="../../react.development.js"></script>
  10. <script src="../../react-dom.development.js"></script>
  11. <link rel="stylesheet" href="./common.css" />
  12. </head>
  13. <body>
  14. <div id="root"></div>
  15. <script type="text/babel">
  16. const root = ReactDOM.createRoot(document.querySelector('#root'));
  17. let isRed = false;
  18. // let element = (
  19. // <div className={(isRed ? 'red' : 'blue') + ' title'}>
  20. // <p>123</p>
  21. // </div>
  22. // );
  23. let element = (
  24. <div className={{}}>
  25. <p>123</p>
  26. </div>
  27. );
  28. // let element = (
  29. // <div
  30. // style={{
  31. // color: 'red',
  32. // fontSize: '20px',
  33. // fontWeight: 700,
  34. // }}
  35. // >
  36. // <p>123</p>
  37. // </div>
  38. // );
  39. root.render(element);
  40. </script>
  41. </body>
  42. </html>