React Native中的defaultProps?

Bri*_*ean 4 reactjs react-native

是否可以在React Native中使用defaultProps?我尝试了以下两种定义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' }
Run Code Online (Sandbox Code Playgroud)

fla*_*aky 14

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

class SliderButton extends React.Component {};

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

SliderButton.defaultProps = {
  animateBackground: false
};

export default SliderButton;
Run Code Online (Sandbox Code Playgroud)


The*_*zel -1

你要这个:

Foo.propTypes = {
    someData: React.PropTypes.string
};
Run Code Online (Sandbox Code Playgroud)

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

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

render() {
    return (
      <View> 
        {this.props.someData || Foo.defaultProps.someData} 
      </View>
    );
  }
Run Code Online (Sandbox Code Playgroud)

this.props.someData如果提供或Foo.defaultProps.someData没有提供,都会使用它。

我还认为您需要包含{this.props.someData || Foo.defaultProps.someData}一个Text元素(即<Text>{this.props.someData || Foo.defaultProps.someData}</Text>)。