在Typescript中将React属性设为只读

qojgxg4l  于 2022-12-05  发布在  TypeScript
关注(0)|答案(2)|浏览(245)

我听说React Props在默认情况下是只读的,但是,我可以覆盖组件中的props值而不会出错。有设置使props只读吗?

interface Props {
  readonly isText: boolean;
}

const ComponentA: FC<Props> = ({isText}: Props) {
  isText = false // <- I can change isText even if I add readonly. why?

  return <>{isText}</>
}
bweufnob

bweufnob1#

分解对象时Typescript不会检测到错误。请尝试将其作为对象访问

const ComponentA: React.FC<Props> = (prop: Props) => {
  prop.isText = false; // <- error

  return <div>{prop.isText}</div>
}

Demo

u1ehiz5o

u1ehiz5o2#

在TypeScript中,readonly保留字是修饰词(Modifier),您可以将它加入界面中的属性(Property),以表示这些属性是只读的。这表示属性只能读取,而且无法变更。不过,readonly保留字只在编译时期有作用,而在执行阶段没有作用。因此,即使您将readonly保留字加入属性,您仍然可以视需要在程式码中变更它的值。
如果要使属性在运行时真正为只读,可以使用Object.freeze()方法。此方法冻结对象,这意味着无法更改该对象。下面是一个示例:

interface Props {
  readonly isText: boolean;
}

const ComponentA: FC<Props> = ({isText}: Props) {
  // Make isText truly read-only by freezing the object
  Object.freeze(isText);

  // This line will throw an error because isText is frozen
  isText = false;

  return <>{isText}</>;
}

相关问题