85016

react 计算机代码优化

原生index.html代码

<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin: 0; padding: 0; } body{ display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } .keyBths{ width: 1200px; height: 800px; border: 1px solid red; position: relative; } #keyChild{ width: 200px; height: 100px; border-radius: 55px ; float: left; background-color: blueviolet; position: relative; margin: 50px ; text-align: center; line-height:100px; text-shadow: 15 15 15 red; } </style> </head>
<body> <span class="keyBths"> <span id="keyChild">1</span> <span id="keyChild">2</span> <span id="keyChild">3</span> <span id="keyChild">4</span> <span id="keyChild">5</span> <span id="keyChild">6</span> <span id="keyChild">7</span> <span id="keyChild">8</span> <span id="keyChild">#</span> <span id="keyChild">%</span> <span id="keyChild">(</span> <span id="keyChild">)</span> </div> </body> </html>     react  代码优化呈现 import React from 'react' import '@/css1/UlList.scss'   const arr = [[1, 2, 3, 4], [5, 6, 7, 8], [`#`, `%`, `(`, `)`]]   export default class Computers extends React.Component { constructor() { super() this.state = { } } keyList = items => { return items.map(item1 => { return <span style={{ width: '200px', height:'100px', borderRadius: '55px' ,float: 'left',backgroundColor: 'blueviolet',position: 'relative',margin: '40px',textAlign: 'center',lineHeight:'100px', textShadow: '15 15 15 #f23a3a' }} >{item1}</span> }) } render() { return<div style={{ width: '900px',height: '800px',border: '1px solid red',position: 'relative'}} > { arr.map((items, index) => { return this.keyList(items) }) } </div> } }     效果图:        

来源:博客园

作者:小珍珠

链接:https://www.cnblogs.com/yangxiaozhen001/p/11425638.html

Recommend