小编Dy4*_*Dy4的帖子

我正在尝试翻译文本，但它会在原始位置上创建空间并影响以下 div 标签，当执行 upperhide 样式时，标签保持左对齐，但当由于转换而使用 upper 样式时，它会在其位置上创建空白，并且标签为右对齐。我尝试将上面的文本包装在 div 上并进行翻译，但无法解决空白问题。非常感谢任何建议。样式和Html如下，

  Upper:{
    transform: "translate(-4px, -20px) scale(.5)",
    backgroundColor:"#FFFFFF",
    transformOrigin:"top center",
    outline: "1px solid transparent",
    overflow:"hidden"

  },
  Upperhide:{
   display:'none'
  },

       <div id="Uppertext" className={(value) ? classes.Upper : classes.Upperhide}>{label}</div>
       <div id="Label" className={classes.Label}>{label}</div>

https://codesandbox.io/s/throbbing-field-4by3l 在示例代码中，按钮包含 hello 作为上部文本。翻译后，它仍然占据原始 div 位置，标签仅出现在上面文本占据的原始 div 位置之后

是否可以在特定的 Material UI 图标中作为 ArrowLeft / ArrowRight 而不是 .MuiSvgIcon-root 进行测试？

应用组件：

return {open ? <ArrowLeft/> :<ArrowRight/>}

RTL 测试：下面的测试正在通过，但它不会检查特定的 ArrowLeft 或 ArrowRight 图标。

describes("MockTest",()=>{

it("renders Left arrow",()=>{
const {container} = renders(<App open={true}/>);
expect(container.querySelector(".MuiSvgIcon-root").toBeTruthy();
});

it("renders Right arrow",()=>{
const {container} = renders(<App open={false}/>);
expect(container.querySelector(".MuiSvgIcon-root").toBeTruthy();
});

});

我正在使用react-chart-js（https://github.com/reactchartjs/react-chartjs-2/blob/react16/example/src/charts/Horizo ​​ntalBar.js）中的水平条，如下所示，

  const data = {
    label: ["graph"],
    datasets: [
      {
        label: "A",
        backgroundColor: "red",
        data: [50],
      },
      {
        label: "B",
        backgroundColor: "yellow",
        data: [10],
      },
    ],
  };

  const chartOptions = {
    scales: {
      xAxes: [
        {
          stacked: true,
          barPercentage: 0.2,
        },
      ],
      yAxes: [
        {
          stacked: true,
          barPercentage: 0.2,
        },
      ],
    },
  };

和

<div>
  <HorizontalBar data={data} options={chartOptions}/>
</div>

我尝试直接将高度应用于 div 或水平栏以限制画布的放大，但它并不能解决问题。是否可以分别向图表画布提供高度和宽度。

我正在尝试使用可选链接应用模板文字。

type Item = {
itemId:number,
price: number};

type ItemType = {
A:Item,
B:Item
};

const data : ItemType = {
  A:{itemId:1, price:2},
  B:{itemId:2, price:3}
};

let Itemid = `data?.${variable}?.itemId`

其中 variable 是以 A 或 B 作为值的字符串。我不确定是否同时支持可选链接和模板文字。任何线索表示赞赏。

编辑：我在尝试时收到“字符串不能用于索引类型项目” data?.[variable]?.itemId。我现在已经更新了类型。

编辑：删除变量类型有助于解决上述错误消息。