typescript - 无法在使用本机反应的打字稿中使用 StatelessComponent

Question

我正在尝试扩展react-native-button库的Button组件。

使用扩展组件的类：

import { DefaultButton } from "../../support/ui/DefaultButton";

...

render() {
    const loginProps = {
            title: "login",
            style: {backgroundColor: DefaultTheme.blueColor},
            containerStyle: {backgroundColor: DefaultTheme.blueColor, flex: 0.5}
        };

    return (<DefaultButton {...loginProps}>test</DefaultButton>);
}

我的扩展组件类DefaultButton.tsx：

import React from 'react';
import { Button, IButtonProperties } from 'react-native-button';


// default button component using stateless functional component
// https://medium.com/@housecor/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc#.vizff8ap4
// http://donormal.com/writing/stateless-components-in-react-typescript/
const DefaultButton : React.StatelessComponent<IButtonProperties> = (props: IButtonProperties) => (
    <Button style={props.style}
            containerStyle={props.containerStyle}>
        {props.children}
    </Button>
)

export { DefaultButton };

但是上面的代码会导致：

关于我的代码出了什么问题的任何线索？

PS这里是我正在使用的库版本：

"react-native": "0.39.2",
"react-native-button": "1.7.1",
"typescript": "2.1.4",

Answer 1

您应该像这样导入 Button：

从'react-native-button'导入按钮；

Answer 2

您应该为 Button 传递“标题”道具，因为在新的 react 本机版本中它已更新。您应该在 DefaultButton 组件类中创建这样的组件：

const DefaultButton : React.StatelessComponent<IButtonProperties> = (props: IButtonProperties) => (

<Button title='Button_Title'
        style={props.style}
        containerStyle={props.containerStyle}>
        {props.children}
</Button>
)

如果您正在创建自己的按钮，那么您可以在任何组件中编写旧样式，例如：

<DefaultButton>
  Button_Title
</DefaultButton>

但是您应该从 DefaultButton 访问子组件。谢谢！