站长

梵

如何在一個組件里使用主題顏色？
如果你從Bootstrap CSS過來，你可能希望我們可以這麼寫：
<p class="text-primary">.text-primary</p>
寫成react就是這樣嘍：
<p className="text-primary">.text-primary</p>
很抱歉，這麼寫行不通！

必須這麼弄：

import { withStyles } from "@material-ui/core/styles";
const styles = theme => ({
  paper: {
    position: "absolute",
    width: "90%",
    backgroundColor: theme.palette.background.paper,
    boxShadow: theme.shadows[5],
    padding: theme.spacing.unit * 4,
    outline: "none",
    height: "90vh",
    overflowY: "scroll",
    color: theme.palette.primary.main
  }
});
class YourComponent extends React.Component {
...
}
export default withStyles(styles)(YourComponent);

material-ui 默認主題屬性可以在這裡查看：https://material-ui.com/customization/default-theme/

梵

moment.unix(ts/ 1000).format("MM/DD/YYYY HH:mm")
'ts' 是MySQL的datetime，除以1000得到秒值，然後再格式化

梵

NodeBB的主題功能不錯，自帶的幾個主題也相當專業，但是不論多好的主題，都有不盡人意的地方，所謂蘿蔔青菜各有所愛。

如果你想對現有的主題做些修改，這個原本相當容易的事情，在NodeBB下變得沒那麼容易了，因為主題是一Package的方式存在，雖然你可以在node_modules下找打對應的主題源代碼，通過修改CSS或者模板，重新Build也可能行的通，但是下次升級你可能會碰到意想不到的問題。所以正確的做法是到原有模板的Github頁面，把項目Clone到本地，然後對他進行修改。之後，你可以把這個主題上傳的服務器，運行
npm install PATH_TO_THEME
比如：我在NodeBB的根目錄下(通常”/opt/nodebb") 有個文件夾“myTheme”, 裡面有我的主題“nodebb-theme-j4fun"，那麼運行命令如下：
npm install myTheme/nodebb-theme-j4fun

然後到NodeBB的Admin後台激活這個主題，然後重新部署即可。

有個值得一提的是，不知道從哪個版本開始(可能是V1.12.x,) The CSS如今變了，之前是：
<link rel="stylesheet" type="text/css" href="{relative_path}/assets/stylesheet.css?{config.cache-buster}" />
新版本不在用stylesheet.css了，必須改為client.css。不然的CSS的修改不會生效。

梵

NodeBB升級后，圖片不能上傳了，頭像也該不了了。用Chrome Inspector查了一下，出現socket.io斷鏈的錯誤。二丈摸不著頭！Google了一把，解決方案很簡單，只需要在跟目錄下，運行下面cmd：
npm install --build-from-source sharp

不用重啟，立即生效！
參考文獻：https://community.nodebb.org/topic/13422/connection-lost-when-attempting-to-upload-a-new-profile-picture-or-cover-picture/16

延伸閱讀：sharp是什麼東西？
https://www.npmjs.com/package/sharp
哦，是圖片裁剪模塊

梵

内存问题可以用以下方法来解决：

"start": "react-app-rewired --max-old-space-size=4096 start",
"build": "export NODE_OPTIONS='--max-old-space-size=4096' && react-app-rewired build",

梵

今天手动更新，碰到这个错误：

No module named _cffi_backend

不知何故，不过容易解决，重新装一箱cffi就可以了：

For python2.x use following command:

python -m pip install cffi

for python3.x

python3 -m pip install cffi

梵

软件版本通常分3级：

第一个数字代表大版本
第二个数字代表小版本
第三个数字代表小打小闹 - bug fixes等

V15 到 V16 是大版本升级，惊心动魄的新功能不少：

fragments - 曾几何时，render()必须且只能返回一个node，因此，你不得不加上一些不必要的<div>把多个node包起来。fragments 让你可以直接render一个数组。这个配上map真是太完美了。注意：key是需要的，这个有点烦。所以v16.2.0后，我们可以用特殊字符<>, 例如：<><li /><li /><>，这样可以就可省略了。
对了，你可以直接返回字符串了 - 不由再次感叹：曾几何时，render()必须且只能返回一个node
contextAPI - 就是说createContext之后，可以在一个component里提供provider，例外一个component里通过consumer来读取
祝：这个我基本上没用过 - 因为我要吗直接传props，或者用其他state管理，例如：redux或者mobx等。
createRef API - 这个在不受控制的form还是很有用的。受控制指通过react state来控制form的字。
新的lifecycles

getDerivedStateFromProps
getSnashotBeforeUpdate

注意：几个will的lifecycles，到V17后就没有life了。所以，大家有空还是看看上面两个新的lifecyles吧。

StrictMode - 用了发现下面几个潜在问题

Identifying components with unsafe lifecycles
Warning about legacy string ref API usage
Detecting unexpected side effects

React.memo - 用来替代PureComponent 或者 shouldComponentUpdate， memo让component变存，或者说只有props变才重新render。如只是父级component变了，memo子component不会重新render
React.lazy - 用来实现code-split - 基本是react loadable的复制版。

下面几个还没出：

Hooks - 让functional component 可以使用 state 通过 useState()
suspend
concurrent rendering

10和11 基本上是用了提供弱CPU和慢网速用户的用户体验。大概意思：hold住render，知道数据ready，这样对网速快的用户少了loading icon，对慢用户仍然有repsond。这个概念有点难，等真正开始用了，我们再深入！

梵

这个问题困扰我很久，每次我都要Google找答案，虽然每次都可以搞定，但是回头又忘记当时是怎么做的了。几天又上网搜了搜，就得这个一定是最佳方案了！记下，记下！

HTML

<!doctype html>
<html lang="en">

<head>
  <!-- head content -->
</head>

<body>
  <header>
    <!-- header content -->
    <h1>Hello header!</h1>
  </header>
  <main>
    <!-- page content -->
    <p>Hello main content!</p>
  </main>
  <footer>
    <!-- footer content -->
    <p>
      I like sitting at the bottom :-)</p>
  </footer>
</body>

CSS

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0 /** this is super important **/
}
footer {
  margin: auto auto 0 auto;
}

演示

https://codepen.io/adamcai/pen/YBXKMQ?editors=1100

梵

设置cognito有点麻烦，这篇文章介绍的很好！
https://aws.amazon.com/blogs/aws/launch-amazon-cognito-user-pools-general-availability-app-integration-and-federation/

梵

https://stackoverflow.com/questions/304837/javascript-user-selection-highlighting

站长

@梵总

梵总发布的帖子

HTML

CSS

演示

站长

@梵总

梵总 发布的帖子

HTML

CSS

演示

梵总发布的帖子