reactjs 如何使用Typescript键入此对象

8tntrjer  于 2023-01-08  发布在  React
关注(0)|答案(3)|浏览(144)

在下面的示例中,我不确定style变量应该是什么类型:

export const getPaddingOrMarginStyle = (arrValue: number[], key: string) => {
// The key can only contain "margin" and "padding"

  const style = {}; // <--------------- what is type??

  if (arrValue.length === 4) {
    style.key = `${arrValue[0]}px ${arrValue[1]}px ${arrValue[2]}px ${arrValue[3]}px`;
  }
  if (arrValue.length === 2) {
    style[key] = `${arrValue[0]}px ${arrValue[1]}px`;
  }

  if (arrValue.length === 1) {
    style[key] = `${arrValue}px`;
  }

  if (arrValue.length === 1 && key === 'margin') {
    if (arrValue[0] === 0) {
      style.margin = `${arrValue}px auto`;
    } else {
      style.margin = `${arrValue}px`;
    }
  }

  return style;  // i want result style { margin: '10px 10px 10px 10px'} or { padding: '10px 10px 10px 10px'}
};
isr3a4wc

isr3a4wc1#

一种方法是:

type MyStyle = {
  margin?: string;
  padding?: string;
}

然后这样使用它:

const style: MyStyle = {};
2skhul33

2skhul332#

您可以不编写函数来添加样式(如填充和边距)。
虽然我不知道您的技术问题,但我建议从小处着手,使用简单的css类,并在TypeScript组件中使用这些类名。
一旦掌握了窍门,就可以使代码更加复杂,并推动函数执行基于条件的更复杂的样式。
祝您在TypeScript学习之旅中好运。

wfsdck30

wfsdck303#

快速搜索后,我发现了此堆栈溢出:Type for style attribute passed to function.
类型似乎是React.CSSProperties

相关问题