0

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

                    <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'，所以如果我们不使用那个道具，'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,


              .
              .
              .

我创建了公共静态 defaultProps，然后我输入了默认值。我将这些属性传递给 state，然后检查 state 中的值。我使用了 state 的值。如果你使用 typescript，你不应该忘记在状态接口中写下这些属性的名字和它们的 proptypes。

4

1 回答 1

0

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

class AutoCompleteInput extends Component {
    ...
}

AutoCompleteInput.defaultProps = {
    title: 'Hello World'
}

有关更多信息，请参阅有关 prop 类型的 React文档。

于 2017-08-21T15:40:30.027 回答