React Native-如何列出我自己的组件道具的建议?

时间:2018-07-13 04:45:21

标签: reactjs react-native

从父级调用组件时,我想展示我所有的道具,

我有一个名为+-------+--------+-------+-------+ | CITY | TYPE | MONTH | VALUE | +-------+--------+-------+-------+ | one | Active | 0 | 222 | | one | Push | 0 | -7 | | one | Push | 1 | 1 | | one | Push | 2 | -6 | | one | Push | 3 | 0 | | two | Active | 0 | 363 | | two | Push | 0 | -5 | | two | Push | 1 | 4 | | two | Push | 2 | -5 | | two | Push | 3 | 5 | | three | Active | 0 | 394 | | three | Push | 0 | 10 | | three | Push | 1 | 5 | | three | Push | 2 | -8 | | three | Push | 3 | 0 | +-------+--------+-------+-------+ 的组件,道具列表如下:

+-------+-------+-------+-------+
| CITY  | TYPE  | MONTH | VALUE |
+-------+-------+-------+-------+
| one   | Final | 0     | 215   | 222 + -7 (add the active and next rows for month 0 for city one from the first table)
| one   | Final | 1     | 216   | 215 + 1 (previous month's final from this table plus this months push from the other table)
| one   | Final | 2     | 210   | 216 + -6 (previous month's final from this table plus this months push from the other table)
| one   | Final | 3     | 210   | ...etc
| two   | Final | 0     | 358   | 363 + -5 (add the active and next rows for month 0 for city two from the first table)
| two   | Final | 1     | 362   | ...etc
| two   | Final | 2     | 357   | ...etc
| two   | Final | 3     | 362   | ...etc
| three | Final | 0     | 404   | ...etc
| three | Final | 1     | 409   | ...etc
| three | Final | 2     | 401   | ...etc
| three | Final | 3     | 401   | ...etc
+-------+-------+-------+-------+

当我从父母那里调用组件时,我想知道我的道具列表,就像我看到这样的facebook组件一样

enter image description here

但是我看不到我自己的道具的建议列表

有一种存档方法吗?

1 个答案:

答案 0 :(得分:0)

enter image description here使用typeScript定义自己喜欢的道具

interface IHelloFormProps {
    name: string;
    handleChange(event: any): void; }

interface IHelloContentProps {
    name: string; }

通过此接口类型定义道具

export default class HelloForm extends React.Component<IHelloFormProps, any> {
    constructor(props: IHelloFormProps) {
        super(props);
    }

    public render() {
        return (
            <div>
                <input 
                    value={ this.props.name }
                    onChange={ e => this.props.handleChange(e) }
                />
            </div>
        );
    }
}

boilerplate