背景: 在App里的GridPreview接受”长宽”, 使用for 循环渲染一系列子元素GridTile

问题: GridTile组件内的样式没有被应用

vscode 0 error , 0 warning. webpack 编译通过. 浏览器 0 error.

预期: GridTile 组件内的样式正常渲染

import React, { useState, useEffect, useCallback } from "react"; import ReactDOM from "react-dom";  function App() {   const [gridW, setGridW] = useState<number>(5);   const [gridH, setGridH] = useState<number>(5);   const setGrid = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {     const current = e.currentTarget;     switch (current.className) {       case "setGridW": {         setGridW(parseInt(current.value));         break;       }       case "setGridH": {         setGridH(parseInt(current.value));         break;       }     }   }, []);   useEffect(() => {}, [gridW, gridH]);   return (     <>       <div className="gridSizeSetting">         <label htmlFor="">           width           <input             type="range"             min="1"             max="24"             step="1"             value={gridW}             className="setGridW"             onChange={setGrid}             name=""             id=""           />         </label>         <span>X</span>         <label htmlFor="">           height           <input             type="range"             min="1"             max="24"             step="1"             value={gridH}             className="setGridH"             onChange={setGrid}             name=""             id=""           />         </label>       </div>       <GridPreview w={gridW} h={gridH}></GridPreview>     </>   ); }  function GridTile({   indexOfW,   indexOfH, }: {   indexOfW: number;   indexOfH: number; }) {   return (     <div className={`tile ${indexOfW}-${indexOfH}`}>       {`${indexOfW}-${indexOfH}`}       <style jsx>{`         div {           background-color: rgb(             ${Math.random() * 100 + 100}px,             ${Math.random() * 100 + 100}px,             ${Math.random() * 100 + 100}px           );           justify-self: strech;           align-self: strech;           grid-column: ${indexOfH + 1};           grid-row: ${indexOfW + 1};         }       `}</style>     </div>   ); }  function GridPreview({ w, h }: { w: number; h: number }) {   const tiles: Array<JSX.Element> = [];   for (let indexOfW = 0; indexOfW < w; indexOfW++) {     for (let indexOfH = 0; indexOfH < h; indexOfH++) {       tiles.push(         <GridTile           key={`${indexOfW},${indexOfH}`}           indexOfH={indexOfH}           indexOfW={indexOfW}         ></GridTile>       );     }   }   return (     <div className="container">       {tiles}       <style jsx>{`         .container {           height: 800px;           display: grid;           grid-template-rows: repeat(${w}, 1fr);           grid-template-columns: repeat(${h}, 1fr);         }       `}</style>     </div>   ); }  ReactDOM.render(<App />, document.querySelector("#root")); 

browser screenshot

react dev tool screenshot

大佬有話說 (0)