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

Question

我正在扩展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} />;

标签： reactjsstyled-components

Answer 1

也许是这样的：

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

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

或者

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

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