有条件地添加/删除元素与反应

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

我希望它会工作。