Uncategorized – Page 34 – 庭喵的出包星球

修改iframe的CSS

接到一個需求要改iframe的樣式，嘗試發現可以，不過在不同的domain會有問題。
正確實作：
http://react-truffle.pinkjelly.org/iframe

有些文件要研究一下：
HTMLIFrameElement
contentDocument
contentWindow

【圖片要放哪裡】
可以放在public資料夾裡，詳細可以看Static File Serving

【要怎麼改port？】
像這樣："dev": "next dev -p 3005",

【styled-components要怎麼加？】
除了安裝之外還有其它設定工作
如果用TypeScript的話要另外安裝@types/styled-components
有時候重整樣式就不見了，要照這樣配置：
next.js/_document.tsx at canary · vercel/next.js (github.com)
Example app with styled-components using babel
但如果要打包上傳，以上２種方式都有問題，把這個_document檔刪掉才ok

【發佈檔案】
“build”: “next build && next export”,
跑這個指令，就會有out資料夾出來，再上傳到我的FTP就行惹！參考文章： https://nextjs.org/docs/advanced-features/static-html-export

Optional chaining

C# Intermediate: Classes, Interfaces and OOP

最近買的一堂課，覺得還不錯，寫一下學習筆記。

code snippets

ctor	Constructor

constructor overloading…如果有運用這個方法的話，記得它要有一個預設的，沒有參數的constructor

2-8 有對List的解釋
也可以看官方文件
List<Type>
List is a generic class that takes parameters

2-11
readonly: this field should be initialized only once.

2-14
Indexers什麼時候用

Naming convention

我是最近才看到原來 Id 有人會取成 ID
不過今天看C#的教學是取 Id

C# Intermediate: Classes, Interfaces and OOP

React Checkbox

function Checked() {
  const [checked, setChecked] = useState(false);
  return (
    <div>
      <input
        type="checkbox"

        checked={checked}
        onChange={() => setChecked((prevState) => !prevState)}
      />
   
    </div>
  );
}

記得，給了checked一定要再給onChange的handler

checkbox在html裡面，如果加了checked就會預設勾選
而且就算給它false的值，還是會預設勾選
React修正了這一點，不會有上述問題
它還有提供一個defaultChecked功能，可以設定預設勾選或沒勾
不過記得如果是做controlled component的話
不需要用到defaultChecked
在useState裡面給它false或true就是預設值哩！！

如果要讓它不能編輯的話，加個props disabled={ isEditable } 就好嚕

如果沒寫好會報錯：
You provided a checked prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultChecked. Otherwise, set either onChange or readOnly.