Как можно по условию передавать пропс или нет?

Question

[Андрей]

// константа от которой зависит передавать пропс defaultValue или нет
const needDefaultValue = false;
<input
  defaultValue={1}
></input>

как можно такое сделать?

Answer 1

[Александр Вульф]

const needDefaultValue = false;

React.createElement('input', needDefaultValue ? { defaultValue: i } : {});
// или
const params = {};
if(needDefaultValue) params.defaultValue = i;
<input {...params} />;

Comments

[Андрей]

Александр Вульф спасибо, недодумался, через spread выйдет, спасибо!!
в этом моменте спред с jsx мощный инструмент

Answer 2

[Роман Александрович]

Немного вопрос не понятный. Если вы хотите установить пропсу значение по дефолту то это делается вот так

class AddAddressComponent extends React.Component {
  render() {
    let {provinceList,cityList} = this.props
    if(cityList === undefined || provinceList === undefined){
      console.log('undefined props')
    } else {
      console.log('defined props')
    }

    return (
      <div>rendered</div>
    )
  }
}

AddAddressComponent.defaultProps = {
  cityList: [],
  provinceList: [],
};

Comments

[Андрей]

Роман Александрович
извините, плохо описал
const needDefaultValue = false;

needDefaultValue 
  ? 
    <input></input>
  : <input defalutValue={1}></input>

так только чтобы это было в одной эелементе

[Роман Александрович]

Андрей:

<input
  defaultValue={needDefaultValue===true?needDefaultValue:null}
></input>

[Андрей]

Роман Александрович: нет, тогда null в пропс передается, у меня другой случай, мне надо пропс вообще не передавать

<Datepicker
  maxDate={new Date()}
/>

есть модуль дейтпикера, и мне надо указывать максимально возможную дату которую можно выбирать, если чтобы границы не было пропс не надо передавать вообще, null, false ... не проходит

[Роман Александрович]

Андрей: опешите пожалуйста подробнее что у вас за компонент, что за пропсы, значения и что вы хотите сделать.

[Андрей]

Роман Александрович https://github.com/xgfe/react-native-datepicker
есть дейтпикер, в приложении он используется в многих местах, иногда надо добавлять валидацию на максимальную дату которую можно выбрать, а иногда нет, для того что бы ограничить возможный выбор даты надо передать props maxDate={} и внутри дату строкой или объектом, но иногда валидация не нужна, и этот пропс передавать тогда не надо

[Роман Александрович]

Андрей: ну вот вы сами и ответили на свой вопрос maxDate={needDefaultValue===true?new Date:''}
попробуйте так
а по хорошему вапще делается так

{needDefaultValue===true?
<Datepicker
  maxDate={new Date()}
/>
:
<Datepicker
/>}

[Андрей]

Роман Александрович: плохое решение, у меня в дейтпикере много пропсов, и дублировать код, это то что больше всего мне хочется, выше предложили вариант через спред, думаю это лучшее здесь решение

<DatePickerModule
                        style={{
                            width: width - 34,
                            paddingBottom: 0,
                            paddingTop: 15,
                            // paddingLeft: 10,
                            borderStyle: "solid",
                            borderWidth: 0,
                            borderBottomColor: c.INPUT_BORDER,
                            borderBottomWidth: 1
                        }}
                        customStyles={{
                            dateInput: {
                                borderWidth: 0
                            },
                            dateTouchBody: {
                                borderWidth: 0
                            },
                            disabled: {
                                backgroundColor: "transparent"
                            },
                            placeholderText: {
                                position: "absolute",
                                bottom: 8,
                                left: 0,
                                color: c.GREY,
                                textAlign: "left",
                                fontSize: 16,
                                fontFamily: "Lato-Semibold"
                            },
                            dateText: {
                                position: "absolute",
                                bottom: 8,
                                left: 0,
                                color: dateColor,
                                textAlign: "left",
                                fontSize: 16,
                                fontFamily: "Lato-Semibold"
                            }
                        }}
                        iconSource={0}
                        ref="dateOfBirth"
                        date={utcDate}
                        mode="date"
                        androidMode="spinner"
                        required={required}
                        format={DATE_FORMAT_CLIENT}
                        placeholder={" "}
                        minDate={new Date(-2208988800000)}
                        maxDate={new Date()}
                        confirmBtnText="Confirm"
                        cancelBtnText="Cancel"
                        disabled={!editable}
                        onDateChange={this.onDateChange}
                    />
                    <AnimatedPlaceholder
                        style={{marginTop: 25}}
                        placeholder={"Birth date"}
                        required={required}
                        value={utcDate}
                        isStartAnimate={utcDate.length > 0}
                    />
                    <Icon style={{
                        position: "absolute",
                        right: 10,
                        top: 17
                    }}
                          name="md-calendar"
                          size={30} color={c.GREY}
                    />