😎

結構使う! ReactNativeのコンポーネントのPropsを条件によって変える方法

1 min read

今回の例はTextInputを例にしました。
TextInputで扱えるPropsは公式にあります

https://reactnative.dev/docs/textinput#props

方法1

Propsの中を条件によって変える(こっちの方法を使うことが多い!)

// numが1の場合は"number-pad"で、違う場合は"default"
<TextInput
    style={{borderBottomColor: 'black', fontSize: 40, width: 400}}
    keyboardType={num === 1 ? "number-pad" : "default"}
    placeholder='0'
    onChangeText={() => handleOnChange()}
/>

方法2

Propsの中を条件によって変えるのではなく、条件によってPropsを扱うかを変える(たまに使う)

// numが1でない場合はkeyboardTypeすらないことになる。
<TextInput
    style={{borderBottomColor: 'black', fontSize: 40, width: 400}}
    placeholder='0'
    {...(num === 1 && {keyboardType: "number-pad"})}
    onChangeText={() => handleOnChange()}
/>

Discussion

ログインするとコメントできます