是否可以在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' }
答案 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.prop1
和this.props.prop2
之类的道具。