相关疑难解决方法(0)

我有一个扩展第三方组件的样式组件:

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;

这导致浏览器控制台中出现以下错误:

警告:React无法识别somePropDOM元素上的prop.如果您有意希望它作为自定义属性显示在DOM中,请将其拼写为小写someProp.如果您不小心从父组件传递了它,请将其从DOM元素中删除

所以,我改变道具有一个data-*属性名称:

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


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