😎

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

2020/12/31に公開

JavaScript

React Native

React

tech

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

方法１

Propsの中を条件によって変える（こっちの方法を使うことが多い！）

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

方法１

方法2

Discussion