使用 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}
    />

我希望它会起作用。