我的问题

我实际上很难理解如何使用样式化方法键入无状态功能组件。

实际代码

以下是doc之后的内容：

const SFCView: SFC<{}> = (props) => {
  return <View style={props.style} />
}

const StyledSFCView = styled(SFCView)`
  width: 100;
  height: 100;
  background-color: green
`;

我的错误

Typescript对我说，类型SFC<{}>中不存在道具风格。确实，我没有定义它。

我尝试过的

我试图告诉打字稿我的SFC有那些道具

const SFCView: SFC<{style: ViewStyle}> = (props) => {
  return <View style={props.style} />
}

但是当我在代码打字稿中的其他地方使用SFCView时，告诉我必须指定View的所有道具。

有人知道如何正确键入吗？

Answer 1

经过一番研究，我发现了 className 的Web标准。

我目前更好的解决方案

import { SFC } from 'react';
import { StyleProp, ViewStyle } from 'react-native';

interface IProps {
 style?: StyleProp<ViewStyle>
}

const SFCView: SFC<IProps> = (props) => {
  return <View style={props.style} />
}

const StyledSFCView = styled(SFCView)`
  width: 100;
  height: 100;
  background-color: green
`;

优势：

在style中，关于SFCView道具的更多错误。
style属性是可选的，因此使用StyledSFCView时没有错误。

缺点：

style是可选的，开发人员可以在使用StyledSFCView时对其进行定义。

现在这是我要澄清的最后一点。

Answer 2

您可以编写style(MyComponent)，但是要产生效果，您需要将className提供的道具styled-components传递到最终的DOM元素。

在您的情况下，它应该看起来像这样：

const StyledView = styled(View)`
  width: 100;
  height: 100;
  background-color: green;
`;

const View = ({ className, ... otherPropsYouMightHave }) => (
  // Whatever you have in this component
  <div className={className}>
    // Whatever View needs to render
  </div>
)

编辑：如您所述，react-native需要道具style而不是className

如何在带有TypeScript的React-Native中使用样式化组件来键入无状态功能组件？

我的问题

实际代码

我的错误

我尝试过的

2 个答案:

我目前更好的解决方案