2017-08-21 6 views
0

ライブ検索を行うオートコンプリートコンポーネントを作成しています。これらはその小道具です:Reactネイティブ条件付き受け入れ小道

    <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, 


       . 
       . 
       . 

public static defaultPropsを作成した後、デフォルト値を設定します。これらの属性を状態に渡した後、状態の値を確認します。私は州の値を使った。 typescriptを使用する場合は、これらの属性の名前をプロタイプと一緒に状態インタフェースに書き込むことを忘れてはなりません。

答えて

0

デフォルトの小道具は、クラスや関数定義の後に割り当てられています。

class AutoCompleteInput extends Component { 
    ... 
} 

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

は、より多くの情報のためdocumentation on prop typesを反応させるのを参照してください。

関連する問題