Question

const styles = {
  card: {
    minWidth: 240,
    color: 'green'
  },
  title: {
    fontSize: 14
  },
  pos: {
    marginBottom: 12,
    padding: 10,
    margin: 10
  }

};

function handleToggle(colorDecider) {
  if (colorDecider)
    styles.card.color = 'blue';
  else
    styles.card.color = 'red';
}

在这里，我正在尝试使用handleToggle函数基于colorDecider的值来更改卡的颜色。但是代码没有改变。但是我已经使用styles.card.color检查了console.log，在console中打印了更改的颜色。但是，卡片上的颜色实际上并没有改变

Answer 1

在对象中的某处设置属性不会神奇地重新渲染页面的相关部分。如果您需要有状态的东西，请将其移至相关组件的状态：

 class Colorful extends React.Component {
  constructor(...props) {
   super(...props);
   this.state = { color: "red" };
  }

  changeColor(color) { this.setState({ color }); }

  render() {
   return <div 
     style={{ color: this.state.color }}
     onClick={() => this.changeColor("blue")}
  >Click me!</div>;
 }
}

Answer 2

同意@jonaswilms，但可以补充一点，您也可以像这样强制更新：

SELECT 
    b.url
    ,a.urls
FROM df2 a
join df1 b 
    on position(b.url in a.urls)>0

上面的例子当然假定您已经绑定了正确的function handleToggle(colorDecider) { if (colorDecider) styles.card.color = 'blue'; else styles.card.color = 'red'; this.forceUpdate(); // force rerender }值，例如

this

有条件地更改材料ui中卡片的颜色？

2 个答案: