反应原生有条件地接受道具

Question

我正在制作一个自动完成组件，该组件可以进行实时搜索。这些是它的道具：

<AutoCompleteInput
ref={autocomplete.tag}
tag={autocomplete.tag}
type={autocomplete.type}
title={autocomplete.title}
required={autocomplete.required}
photoRequired={autocomplete.photoRequired}
defaultValue={autocomplete.defaultValue}
options={autocomplete.options}
titleKey={autocomplete.titleKey}
valueKey={autocomplete.valueKey}
singleSelection={false}
maxSuggestionNumber={50}
minimumCharacterNumber={-2}
/>

singleSelection、maxSuggestionNumber 和 minimumCharacterNumber 是可选的道具。我想给他们默认值，我也应该检查他们的道具值。例如;minimumCharacterNumber 的默认值应该是"0"，所以如果我们不使用该 prop，"0"值应该传递到组件中。但是，如果该值小于 0，则组件应使用默认值"0"。 我试过了这个功能public static defaultProps() { ...... }，但我感到困惑，无法有条件地处理它。 它的普通技术是什么？任何解决方案都将得到认可。

编辑：我解决了我的问题，我想分享。

public static defaultProps = {
minimumCharacterNumber: 0,
maxSuggestionNumber: 50,
singleSelection: false,
}
constructor(props: ACModalProps) {
super(props)
this.state = {
maxSuggestionNumber:
this.props.maxSuggestionNumber && this.props.maxSuggestionNumber > 0
? this.props.maxSuggestionNumber
: ACModal.defaultProps.maxSuggestionNumber,
minimumCharacterNumber:
this.props.minimumCharacterNumber && this.props.minimumCharacterNumber > 0
? this.props.minimumCharacterNumber
: ACModal.defaultProps.minimumCharacterNumber,
singleSelection: this.props.singleSelection
? this.props.singleSelection
: ACModal.defaultProps.singleSelection,

.
.
.

我创建了公共静态默认属性，然后我放置了默认值。我将这些属性传递给状态，然后检查状态中的值。我使用了状态中的值。如果你使用打字稿，你不应该忘记在状态接口中写下这些属性的名称及其属性类型。

Answer 1

默认 prop 在类或函数定义之后分配：

class AutoCompleteInput extends Component {
...
}
AutoCompleteInput.defaultProps = {
title: 'Hello World'
}

有关更多信息，请参阅 React 文档 关于道具类型。