由接口错误键入的样式组件

Question

我使用SC和react，决定用界面输入一个元素，但是出现这个错误 react-dom.development.js:86 警告：收到非布尔属性

false

completed

。

如果要将其写入 DOM，请传递一个字符串：completed="false" 或 Completed={value.toString()}。

如果您过去使用completed={condition && value} 有条件地省略它，请传递completed={condition ?值：未定义} 相反。

export const TaskText = styled.span<ITaskStatus>`
  flex-grow: 1;
  font-size: ${({ theme }) => theme.sizes.xl}px;
  color: ${({ completed }) => (completed ? '#a9a9a9' : '#333')};
  text-decoration: ${({ completed }) => (completed ? 'line-through' : 'none')};
`

export interface ITaskStatus {
  completed?: boolean
}

对此有什么建议吗？

我尝试将通用接口替换为 导出 const TaskText = styled.span<{ completed?: boolean }>` 但仍然出现错误

Answer 1

在样式组件中，当将 prop 传递给组件时，prop 通常被评估为字符串。这种行为有时会导致意想不到的结果，特别是在处理布尔属性时。

有一个方法可以解决这个问题：

首先，您需要将类型更改为

string

，然后在三元中，因为现在不是布尔值，您需要检查字符串是

"true"

还是

"false"

export interface ITaskStatus {
  completed?: string
}

export const TaskText = styled.span<ITaskStatus>`
  flex-grow: 1;
  font-size: ${({ theme }) => theme.sizes.xl}px;
  color: ${({ completed }) => (completed === "true" ? '#a9a9a9' : '#333')};
  text-decoration: ${({ completed }) => (completed === "true" ? 'line-through' : 'none')};

现在您需要更改在使用 SC 的组件中完成的 prop：

组件内部：

const [isCompleted, setIsCompleted] = useState<boolean>(false);

// This to pass "true" or "false" that is needed in the SC
const booleanToString = (value: boolean) => (value ? 'true' : 'false');

...some code...

<TaskText completed={booleanToString(isCompleted)}>
...some code...
</TaskText>

...some code...