React Native中的defaultProps?

时间:2017-03-26 22:20:01

标签: reactjs react-native

是否可以在React Native中使用defaultProps? 我尝试了以下2种定义defaultProps的方法,并在尝试访问defaultProp时得到null

export default class Foo extends Component {
  // 1. define defaultProps within Class
  static defaultProps = {
    someData: 'Hello',
  }

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    console.log(this.props.someData);
  }

  render() {
    return (
      <View> {this.props.someData} </View>
    )
  }
}
  // 2. define defaultProps outside Class
Foo.defaultProps = { someData: 'Hello' }

3 个答案:

答案 0 :(得分:11)

我总是这样做,它运作得很好:

class SliderButton extends React.Component {};

SliderButton.propTypes = {
  animateBackground: PropTypes.bool
};

SliderButton.defaultProps = {
  animateBackground: false
};

export default SliderButton;

答案 1 :(得分:-1)

你想要这个:

Foo.propTypes = {
    someData: React.PropTypes.string
};

这表示someData应该是一个字符串,但不是必需的。

然后在render()中,你可以这样做:

render() {
    return (
      <View> 
        {this.props.someData || Foo.defaultProps.someData} 
      </View>
    );
  }

如果已提供,则会使用this.props.someData,如果没有,则使用Foo.defaultProps.someData

我还认为您需要将{this.props.someData || Foo.defaultProps.someData}包裹在Text元素中(即<Text>{this.props.someData || Foo.defaultProps.someData}</Text>)。

答案 2 :(得分:-1)

我在ReactNative中完成

import React, {
    Component
} from 'react';
import {
    View,
    Text
} from 'react-native';
import PropTypes from 'prop-types';

export default class foo extends Component {
    static propTypes = {
        name: PropTypes.array,
        prop2: PropTypes.string
    }
    static defaultProps = {
        array: [1, 2, 4],
        name: 'abc'
    }
    constructor(props) {
        super(props);
        this.state = {};
    }
    render() {
        return (
            <View>
                <Text>Default Prop array is: {this.props.array}</Text>
                <Text>Default Prop name is: {this.props.name}</Text>
            </View>
        );
    }
}

然后您可以使用this.props.prop1this.props.prop2之类的道具。