{"id":85230,"date":"2020-03-31T05:23:58","date_gmt":"2020-03-30T21:23:58","guid":{"rendered":"http:\/\/4563.org\/?p=85230"},"modified":"2020-03-31T05:23:58","modified_gmt":"2020-03-30T21:23:58","slug":"styled-jsx-%e5%8a%a8%e6%80%81%e6%a0%b7%e5%bc%8f%e6%b2%a1%e6%9c%89%e8%a2%ab%e5%ba%94%e7%94%a8%e5%88%b0%e5%85%83%e7%b4%a0%e4%b8%8a","status":"publish","type":"post","link":"http:\/\/4563.org\/?p=85230","title":{"rendered":"styled-jsx \u52a8\u6001\u6837\u5f0f\u6ca1\u6709\u88ab\u5e94\u7528\u5230\u5143\u7d20\u4e0a"},"content":{"rendered":"
\n
\n
\n

styled-jsx \u52a8\u6001\u6837\u5f0f\u6ca1\u6709\u88ab\u5e94\u7528\u5230\u5143\u7d20\u4e0a <\/h1>\n

<\/p>\n

\n
\u8cc7\u6df1\u5927\u4f6c : MXXXXXS <\/span> <\/i> 11<\/span> <\/div>\n
<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n
<\/p>\n

\u80cc\u666f:<\/strong> \u5728App<\/code>\u91cc\u7684GridPreview<\/code>\u63a5\u53d7”\u957f\u5bbd”, \u4f7f\u7528for \u5faa\u73af<\/code>\u6e32\u67d3\u4e00\u7cfb\u5217\u5b50\u5143\u7d20GridTile<\/code><\/p>\n

\u95ee\u9898:<\/strong> GridTile<\/code>\u7ec4\u4ef6\u5185\u7684\u6837\u5f0f\u6ca1\u6709\u88ab\u5e94\u7528<\/p>\n

vscode 0 error , 0 warning. webpack \u7f16\u8bd1\u901a\u8fc7. \u6d4f\u89c8\u5668 0 error.<\/em><\/p>\n

\u9884\u671f:<\/strong> GridTile \u7ec4\u4ef6\u5185\u7684\u6837\u5f0f\u6b63\u5e38\u6e32\u67d3<\/p>\n

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\")); <\/code><\/pre>\n
browser screenshot<\/p>\n
react dev tool screenshot<\/p>\n<\/p><\/div>\n
 \u5927\u4f6c\u6709\u8a71\u8aaa<\/b> (0<\/span>)        <\/div>\n
 <\/div>\n<\/p><\/div>\n<\/p><\/div>\n
    \n
  • \n","protected":false},"excerpt":{"rendered":"
    styled-jsx \u52a8\u6001\u6837\u5f0f\u6ca1\u6709…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[],"_links":{"self":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/85230"}],"collection":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=85230"}],"version-history":[{"count":0,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/85230\/revisions"}],"wp:attachment":[{"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=85230"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=85230"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=85230"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}