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 はオプションの props です。それらにデフォルト値を与えたいと思います。また、それらの prop 値を確認する必要があります。例えば; minimumCharacterNumber のデフォルト値は '0' である必要があるため、その prop を使用しない場合は、'0' 値をコンポーネントに渡す必要があります。ただし、その値が 0 より小さい場合、コンポーネントはデフォルト値の '0' を使用する必要があります。function を試してみました 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,


              .
              .
              .

public static defaultProps を作成してから、デフォルト値を設定しました。これらの属性を状態に渡し、状態の値を確認します。状態の値を使用しました。typescript を使用する場合は、これらの属性の名前を proptype との状態インターフェイスに書き込むことを忘れないでください。

4

1 に答える 1