Reactjs 如何在不向底层DOM元素传递道具的情况下扩展样式化组件？

我有一个样式化组件，它扩展了第三方组件：

import Resizable from 're-resizable';
...
const ResizableSC = styled(Resizable)``;
export const StyledPaneContainer = ResizableSC.extend`
    flex: 0 0 ${(props) => props.someProp}px;
`;


const PaneContainer = ({ children, someProp }) => (
    <StyledPaneContainer
        someProp={someProp}
    >
        {children}
    </StyledPaneContainer>
);

export default PaneContainer;

const ResizableSC = styled(Resizable)``;
export const StyledPaneContainer = ResizableSC.extend`
    flex: 0 0 ${(props) => props.$someProp}px;
`;

const PaneContainer = ({ children, someProp }) => (
    <StyledPaneContainer
        $someProp={someProp}  // '$' signals the transient prop        
    >
        {children}
    </StyledPaneContainer>
);

---

这是可行的，但我想知道是否有一种本机方法可以在样式化组件中使用道具，而不将道具传递给DOM元素（？）

您可以尝试使用defaultProps：

import Resizable from 're-resizable';
import PropTypes from 'prop-types';
...
const ResizableSC = styled(Resizable)``;
export const StyledPaneContainer = ResizableSC.extend`
    flex: 0 0 ${(props) => props.someProp}px;
`;

StyledPaneContainer.defaultProps = { someProp: 1 }

const PaneContainer = ({ children }) => (
    <StyledPaneContainer>
        {children}
    </StyledPaneContainer>
);

export default PaneContainer;

从“可重新调整大小”导入可调整大小；
从“道具类型”导入道具类型；
...
const resizeblesc=styled（resizeable）`；
export const StyledPaneContainer=resizeblesc.extend`
flex:0${（props）=>props.someProp}px；
`;
StyledPaneContainer.defaultProps={someProp:1}
const PaneContainer=（{children}）=>(
{儿童}
);
导出默认PaneContainer；

我们还可以使用“attrs”传递道具。这有助于附加其他道具（示例取自样式化组件官方文档）：

const Input=styled.Input.attrs({
//我们可以定义静态道具
键入：“密码”，
//或者我们可以定义动态的
边距：props=>props.size | |“1em”，
填充：props=>props.size | |“1em”
})`
颜色：淡紫罗兰色；
字号：1em；
边框：2倍纯色淡紫色；
边界半径：3px；
/*这里我们使用动态计算的道具*/
边距：${props=>props.margin}；
填充：${props=>props.padding}；
`;
渲染(


); 

根据on的建议，您可以对道具进行分解，只将相关道具传递给

可调整大小的

const ResizableSC = styled(({ someProp, ...rest }) => <Resizable {...rest} />)`
    flex: 0 0 ${(props) => props.someProp}px;
`;

const resizeblesc=styled（（{someProp，…rest}）=>）`
flex:0${（props）=>props.someProp}px；
`;

对于那些（像我一样）因为SC和react路由器的

链接出现问题而登陆这里的人

这与@tskjetne的答案基本相同，但采用JS语法风格

const StyledLink = styled(({ isCurrent, ...rest }) => <Link {...rest} />)(
  ({ isCurrent }) => ({
    borderBottomColor: isCurrent ? 'green' : 'transparent',
  }),
)

constyledlink=styled（{isCurrent，…rest}）=>）(
（{isCurrent}）=>({
borderBottomColor:isCurrent？'green'：'transparent'，
}),
)
2020更新：使用临时道具
有了它，你们就可以使用了。这样，您就不需要额外的包装，即减少了不必要的代码：

瞬态道具是传递道具的一种新模式，这些道具仅由样式化组件显式使用，并不意味着传递到更深的组件层。以下是您如何使用它们：

父组件：

import Resizable from 're-resizable';
...
const ResizableSC = styled(Resizable)``;
export const StyledPaneContainer = ResizableSC.extend`
    flex: 0 0 ${(props) => props.someProp}px;
`;


const PaneContainer = ({ children, someProp }) => (
    <StyledPaneContainer
        someProp={someProp}
    >
        {children}
    </StyledPaneContainer>
);

export default PaneContainer;

const ResizableSC = styled(Resizable)``;
export const StyledPaneContainer = ResizableSC.extend`
    flex: 0 0 ${(props) => props.$someProp}px;
`;

const PaneContainer = ({ children, someProp }) => (
    <StyledPaneContainer
        $someProp={someProp}  // '$' signals the transient prop        
    >
        {children}
    </StyledPaneContainer>
);

constpanecontainer=（{children，someProp}）=>(
{儿童}
);
您能解释一下这个答案吗？您可以使用defaultProps将默认道具传递给组件StyledPaneContainer。你试过了吗？没有，我想知道如果
someProp
的值需要是动态的（？），为什么会建议使用
defaultProps
，因为我们可以尝试使用“attrs”。更新我的答案。请检查，让我知道您的想法。不幸的是，
attrs
将所有道具传递到DOM，因此它无法阻止React的无效道具警告，除非您仅使用道具名称，而这些道具名称恰好也是有效的HTML属性。我希望样式化组件在将来改进其API，以更好地支持此用例。与此同时，@tskjetne的答案在大多数情况下都是可行的解决办法。我怎么没有想到这一点？非常感谢你！如果我们不得不这样使用它，那么样式化组件就没有那么大意义了。这可能是一个很好的`样式化（链接）````…``但不是。你必须将react导入到编写它的文件中，以使其工作。我相信这也会杀死任何
as=“foo”
类型的道具。我真希望样式化组件文档已经更新，以包含更新后的文档-