Javascript React组件内联样式速记声明相互覆盖

我有一个React组件，它传递一个values对象，如下所示：

{gridColumn: '1 / 3', gridRow: '2 / 5', gridArea: 'header'}

然后添加到构件样式中，如：

this.cell.style.setProperty('grid-area', values.gridArea);
this.cell.style.setProperty('grid-column', values.gridColumn);
this.cell.style.setProperty('grid-row', values.gridRow);

但是，使用网格列和网格行属性，这些属性将在浏览器中缩写为“网格区域：2/1/5/3”的简写声明，并覆盖我的网格区域样式

如果在循环中设置，也会发生这种情况：

for (let prop in values) {
  this.cell.style[prop] = values[prop];
};

有更好的方法吗？

来自MDN：

• 是

  网格行开始

  ，

  网格列开始

  ，

  网格行结束

  和

  网格列结束

• 是

  网格列开始

  和

  网格列结束

• 是

  网格行开始

  和

  网格行结束

  的缩写

因此，

网格区域

与

网格列

和

网格行

相互排斥。 React并不是为了智能地为您合并这些CSS属性而设计的，它只是让最后一个定义的属性获胜

但是，您可以自己添加逻辑来合并这些属性：

  const mergedGridColumn = gridColumn.replace(/[0-9*]/g, value => `${value} ${gridArea}`);
  const mergedGridRow = gridRow.replace(/[0-9*]/g, value => `${value} ${gridArea}`);

对于

值

：

{
  const values = {
  gridArea: 'header',
  gridColumn: '1 / 3',
  gridRow: '2 / 5',
}

这将产生

样式

：

{
  grid-area: 2 header / 1 header / 5 header / 3 header;
}

完整示例如下：

const-App=（）=>{
常量值={
gridArea:'标题'，
gridColumn:'1/3'，
gridRow:'2/5'，
};
返回(
);
}
常数头=（道具）=>{
const{gridArea，gridColumn，gridRow}=props.values；
const mergedGridColumn=gridColumn.replace（/[0-9*]/g，value=>`${value}${gridArea}`）；
const mergedGridRow=gridRow.replace（/[0-9*]/g，value=>`${value}${gridArea}`）；
返回(
欢迎反应
);
}
ReactDOM.render（，document.getElementById（'root'））
正文{
保证金：0；
填充：0；
字体系列：无衬线；
}
.App{
文本对齐：居中；
}
.应用程序标题{
背景颜色：兰花；
颜色：白色
}

反应应用程序
您是否尝试从GridColn和gridRow计算网格面积？它可能会解决这个问题。