Reactjs 如何防止道具传递到扩展组件？

我的问题与类似，但我需要键入一个组件。我尝试了多种方法，但仍然会出错

我不确定问题是在我的理解中，还是我做错了什么？以下是我尝试过的：

• 第一种方法工作正常，但抛出警告：React无法识别DOM元素上的

  isActive

  属性
• 第二个和第三个抛出TS错误：没有与此调用匹配的重载

import*as React from“React”；
从“react textarea autosize”导入textarea autosize，{textarea AutoSizeProps}；
从“样式化组件”导入样式化；
界面道具{
isActive？：布尔值；
}
接口ExtendedProps扩展Props，TextareaAutosizeProps{}
const FirstTry=styled（textraeaautosize）`
颜色：${（{isActive}）=>（isActive？“红色”：“蓝色”）}；
`;
const SecondTry=styled（（{isActive，…rest}:ExtendedProps）=>(
))`
颜色：${（{isActive}）=>（isActive？“红色”：“蓝色”）}；
`;
const ThirdTry=（{isActive，…rest}:ExtendedProps）=>{
const Foo=styled（TextareaAutosize）`
颜色：${isActive？“red”：“blue”}；
`;
回来
};
导出默认函数App（）{
返回(
你好，代码沙盒
{/*FirstTry-警告：React无法识别DOM元素上的'isActive'属性*/}
开始编辑，看看神奇的发生！
);
}

链接到沙盒：

---

第二种方法看起来不错，只是有一件小事导致了错误：

ref

prop的

TextareaAutosizeProps

与您的样式化组件的

ref

prop冲突

ref

（和

key

）是一个棘手的“道具”——你把它传递给一个组件，就像任何其他道具一样，但它没有出现在你的道具中（例如，如果你记录它们），它的处理方式是不同的

如果您看第二个示例：

const SecondTry = styled(({ isActive, ...rest }: ExtendedProps) => (
  <TextareaAutosize {...rest} />
))`
  color: ${({ isActive }) => (isActive ? "red" : "blue")};
`;

---

如果您需要它，您将需要使用

React.forwardRef

函数（请参阅更多信息）。

非常感谢：）

const SecondTry = styled(({ isActive, ...rest }: ExtendedProps) => (
  <TextareaAutosize {...rest} />
))`
  color: ${({ isActive }) => (isActive ? "red" : "blue")};
`;

interface ExtendedProps extends Props, Omit<TextareaAutosizeProps, 'ref'> {}