在自定义视图中调用super()时,请确保传递组件构造函数传递的相同道具

时间:2017-11-23 06:25:28

标签: javascript reactjs react-native ecmascript-6

这是我生成的代码

  

警告:LoaderView(...):在LoaderView中调用super()时,make   一定要传递组件构造函数所用的相同道具   过去了。

import * as React from "react";
import {ActivityIndicator, Text, View} from 'react-native'

    export class LoaderView extends React.Component {

        constructor(props) {
            super(props)
        }

        props = {
            title: "",
            loading: false
        }


        render() {
            if (this.props.loading) {
                return <View {...this.props} style={{flex: 1, justifyContent: 'center'}}>
                    <ActivityIndicator
                        size={"large"}
                        animating={true}/>

                    <Text
                        style={{textAlign: 'center', fontSize: 20, fontWeight: '500'}}>
                        {this.props.title}
                    </Text>
                </View>
            } else {
                return <View {...this.props} style={{flex: 1, justifyContent: 'center'}}>
                    <Text
                        style={{textAlign: 'center', fontSize: 20, fontWeight: '500'}}>
                        {this.props.title}
                    </Text>
                </View>
            }
        }

    }

如何在上面的代码中解决此警告?

3 个答案:

答案 0 :(得分:9)

使用defaultProps代替道具

static defaultProps = {
    title: "",
    loading: false
}

答案 1 :(得分:0)

我得到了这个警告,结果对我来说是一条红鲱鱼。请注意,尽管有此警告,该代码仍然有效。 解决方案是为props对象声明一个接口,并确保您不会错过任何属性。特别是,您可能缺少 id 。就我而言,不需要构造函数,super(props)也无济于事。示例:

export interface LoaderProps extends React.Props<LoaderProps> {
  id: string;
  title: string;
  loading: bool;
}

export class LoaderView extends React.Component<LoaderProps> {
  //...
}

答案 2 :(得分:0)

我刚刚使用过this.props = props,这可以帮我解决问题!

constructor(props) {
    super(props)
    this.props = props
}