样式化组件 - 如何防止道具被传递给扩展组件？答案

【问题标题】：Styled Component - How to prevent a prop from being passed to the extended component?样式化组件 - 如何防止道具被传递给扩展组件？
【发布时间】：2018-10-09 01:25:21
【问题描述】：

我正在扩展Textarea，我希望completed 可以被StyledItemTextarea 访问，而不是Textarea。我怎样才能做到这一点？

import Textarea from 'react-textarea-autosize';

const TextareaAutosizeSC = styled(Textarea)`
    ...
`;

const StyledItemTextarea = TextareaAutosizeSC.extend`
    color: ${({ completed }) => completed ? '#ccc' : '#fff'};
`;

const MyTextarea = ({ completed }) => <StyledItemTextarea completed={completed} />;

【问题讨论】：

他们在这里有几个解决方案github.com/styled-components/styled-components/issues/305。可能会有所帮助:)

标签： reactjs styled-components

【解决方案1】：

可能是这样的：

const TextareaAutosizeSC = ({ completed, ...rest }) => {
  const TextArea = styled(Textarea)`
    ...
  `;

  return <TextArea {...rest} />
}

或

const TextareaAutosizeSC = styled(Textarea)`
    ...
`;

const TextAreaWithoutSomeProps = ({ completed, ...rest }) => <TextareaAutosizeSC {...rest} />

【讨论】：

【解决方案2】：

我找到了解决办法：

import Textarea from 'react-textarea-autosize';

const StyledItemTextarea = styled(({ completed, ...rest }) => <Textarea {...rest} />)`
    color: ${({ completed }) => completed ? '#ccc' : '#fff'};
`;

const MyTextarea = ({ completed }) => <StyledItemTextarea completed={completed} />;

【讨论】：