React Native 中的 defaultProps？

IT技术 reactjs react-native
2021-05-11 14:00:41

是否可以在 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个回答

我总是这样做，而且效果很好：

class Foo extends React.Component {};

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

Foo.defaultProps = {
  animateBackground: false
};

export default Foo;

你要这个：

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>）。

我在 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>
        );
    }
}

然后你可以使用这些props，比如this.props.prop1和this.props.prop2。

其它你可能感兴趣的问题
上一篇令人困惑的 Y 轴移动问题 - 仅在正 y 方向，并且仅在非常特定半径的移动上 下一篇磁头沿 X 轴移动时冷却风扇噪音