4.绑定样式.html 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <script src="../js/babel.min.js"></script>
  8. <script src="../js/react.development.js"></script>
  9. <script src="../js/react-dom.development.js"></script>
  10. </head>
  11. <body>
  12. <div id="root"></div>
  13. <script type="text/babel">
  14. let manager = {
  15. width: '400px',
  16. height: '400px',
  17. border: '1px solid #000',
  18. margin: '0 auto',
  19. display: 'flex',
  20. justifyContent: 'space-between',
  21. alignItems: 'center'
  22. }
  23. let left = {
  24. width: '100px',
  25. height: '100px',
  26. backgroundColor: '#f00'
  27. }
  28. let element = (
  29. <div style={manager}>
  30. <div style={left}></div>
  31. <div style={{
  32. width: '100px',
  33. height: '100px',
  34. backgroundColor: '#00f'
  35. }}></div>
  36. </div>
  37. )
  38. const root = document.getElementById('root')
  39. ReactDOM.createRoot(root).render(element)
  40. </script>
  41. </body>
  42. </html>