使用React

Question

我有这个TextField元素。我想有条件地添加value={x}或defaultValue={x}

这将有效（没有任何条件）

<TextField
    id="pickupName"
    className="order-form-input"
    onBlur={this.fieldChange('name')}
    ref="pickupName"
    defaultValue={(order.pickup || {}).name || ''}
    // hintText="Pickup Contact Name"
    floatingLabelFixed={true}
    floatingLabelText="Contact Name"
/>

但是，如果我尝试添加条件（当然会失败）：

<TextField
    id="pickupName"
    className="order-form-input"
    onBlur={this.fieldChange('name')}
    ref="pickupName"
      {true ? defaultValue={(order.pickup || {}).name || ''} :
                            value={(order.pickup || {}).name || ''}}
    // hintText="Pickup Contact Name"
    floatingLabelFixed={true}
    floatingLabelText="Contact Name"
/>

有没有办法让defaultValue或value属性指向函数而不是静态字符串？鉴于我的需要，我必须有条件地使用value或defaultValue因为它们的行为完全不同。

Answer 1

如果您使用的是es6，则使用{...args}运算符解析组件声明结尾的所有剩余参数。

示例：

<TextField
    id="pickupName"
    className="order-form-input"
    onBlur={this.fieldChange('name')}
    ref="pickupName"
    floatingLabelFixed={true}
    floatingLabelText="Contact Name",
    {...extra_args}
    />

我希望它能奏效。