小编Ste*_*sen的帖子

我正在使用CSS网格创建一个布局,我希望每行之间有不同的空间.

我可以通过在每个元素上使用margin来创建布局,但这种模糊了代码的简单性.有没有我可以做到的网格技巧,grid-row-gap只看到一个值,它用于所有行.

我想要实现的是这样的布局:

https://jsfiddle.net/8swzgk0b/1/

.grid {
  display: grid;
  grid-template-columns: auto 25% 25%;
  grid-template-rows: auto auto auto;
  width 100%;
  margin: 20px;
  grid-column-gap: 40px;
  /* grid-row-gap: 40px 60px; */
}

div {
  background: #838383;
  height: 80px;
}

.wide {
  grid-column: 1 / span 3;
  margin-bottom: 5px;
}

.row-2 {
  background: green;
  margin-bottom: 10px;
}

.row-3 {
  background: blue;
  margin-bottom: 30px;
}

.row-4 {
  background: red;
  margin-bottom: 20px;
}

<div class="grid">
  <div class="wide"></div>
  <div class="row-2"></div>
  <div class="row-2"></div>
  <div class="row-2"></div>
  <div class="row-3"></div> …

我想创建一个具有一些默认值的变量，它是从 Promise 解析的返回类型的扩展接口。我的功能是这样的：

function getAge(): Promise<number> {
  return new Promise((resolve) => {
  resolve(42)
  })
}

我的变量的默认值是：

let user: { name: string, age: number } = { name: "", age: 0 }

我尝试过使用 ReturnType<>，但是Promise<number>当我只想返回数字时，我似乎只能获取返回类型。

我创建了一个更高阶的组件，该组件应该为我的组件添加一些其他功能。但是，当我在该组件中使用react钩子时，会收到以下eslint警告。

无法在回调内部调用React Hook“ React.useEffect”。必须在React函数组件或自定义的React Hook函数中调用React Hooks。（反应钩/钩规则）

为什么会收到此警告？在HoC中使用挂钩是否被认为是不好的做法？

最小示例：

const Hello = props => <p>Greetings {props.name}</p>;

const Wrapper = Component => props => {
  React.useEffect(() => {
    // Do something here
  }, []);
  return <Component {...props} />;
};

export default Wrapper(Hello)

codeandbox：https：//codesandbox.io/s/proud-tree-5kscc