小编Phi*_*ong的帖子

假设我有这样的事情：

.object {
  $primary-color: blue;
  h1 {
    font-size: 40px;
    color: $primary-color; 
  }
  p {
    font-size: 20px;
    color: $primary-color; 
  }
}

现在我会有一个蓝色的物体。但是假设我想制作相同的对象但颜色为红色，写起来可能很直观

.object red {
  $primary-color: red;
}

并期望所有 $primary-color 变为红色，但这在 SCSS 中无效。我要写的是：

.object red {
  $primary-color: red;
  h1 { color: $primary-color; }
  p { color: $primary-color; }
}

如果我这样做，我仍然可以保持 h1 中的 40px 字体大小和 p 中的 20px 字体大小，并将所有颜色更改为红色。然而，一旦我的代码变大，这将变得越来越难以维护。

SCSS 是否提供任何工具来使此任务更加模块化和可维护？

我不知道这是一个已知的问题还是一个预期的功能,但我发现了一个有趣的问题.

所以我们都知道如果我们想在React中呈现一个反应值,我们必须将值放在状态并使用setState:

constructor() {
  super();
  this.state = { counter: 0 }
  this.incrementButtonListener = (e) => {
    e.preventDefault();
    this.setState(prevState => ({ counter: prevState.counter + 1 }));
  };
}

render() {
  return (
    <div>
      <h1>{this.state.counter}</h1>
      // When clicked, counter increments by 1 and re-renders
      <button onChange={this.incrementButtonListener}>Increment</button> 
    </div>
  )
}

但是如果我们counter作为一个字段属性,render()将只捕获counter创建组件的快照,即使counter递增,结果也不会在render()中被反应显示:

constructor() {
  super();
  this.counter = 0;
  this.incrementButtonListener = (e) => {
    e.preventDefault();
    this.counter++;
  };
}

render() {
  return (
    <div>
      <h1>{this.counter}</h1>
      // When clicked, counter increments …

假设我有一个 Person 类：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

然后我在状态中实例化一个 Person 对象：

export default class SomeComponent extends React.Component {
  constructor() {
    super();
    this.state = {
      cena: new Person('John Cena', 40)
    }
  }

  render() {
    const { name, age } = this.state.cena;
    return (
      <div>
        <p>Name: {name}</p>
        <p>Age: {age}</p>
      </div>
    )
  }
}

假设我们有一个按钮可以将塞纳的年龄加一。尽管我们只需要更改年龄，但使用全新的 Person 对象设置状态是否安全？

this.setState(prevState => ({
  cena: new Person(prevState.cena.name, prevState.cena.age + 1)
}));

我确实用 Chrome 的油漆闪烁工具对此进行了测试。当我设置this.state.cena一个年龄增加的全新人员时，只有年龄段落被重新绘制，名称段落保持不变。

不过，我还是有点担心。我应该依靠 …