如何有条件地向React组件添加属性?

是否有一种方法只在满足特定条件时才向React组件添加属性?

我应该添加必需的和readOnly属性，以形成基于Ajax调用后呈现的元素，但我不知道如何解决这个问题，因为readOnly="false"并不等同于完全省略属性。

下面的例子应该解释我想要什么，但它不起作用。

(解析错误:意外的标识符)

function MyInput({isRequired}) {
  return <input classname="foo" {isRequired ? "required" : ""} />
}

当前回答

这里有一个替代方案。

var condition = true;

var props = {
  value: 'foo',
  ...(condition && { disabled: true })
};

var component = <div {...props} />;

或者内联版本

var condition = true;

var component = (
  <div value="foo" {...(condition && { disabled: true })} /> 
);

其他回答

考虑到JSX深度文章，你可以这样解决你的问题:

if (isRequired) {
  return (
    <MyOwnInput name="test" required='required' />
  );
}
return (
    <MyOwnInput name="test" />
);

当您不需要该属性时，必须将其值设置为未定义例子:

<a data-tooltip={sidebarCollapsed?'Show details':undefined}></a>

您可以使用相同的快捷方式，用于添加/删除组件({isVisible && <SomeComponent />})的(部分)。

class MyComponent extends React.Component {
  render() {
    return (
      <div someAttribute={someCondition && someValue} />
    );
  }
}

你可以在你的渲染方法(如果使用类)或返回语句(如果使用函数组件)中执行以下操作:

 <MyComponent required={isRequired ? 'true' : undefined} />

在这种情况下，如果isRequired为undefined、false或null(这与添加属性但将其设置为'false'不同)，则属性将不会被添加。还要注意，我使用字符串而不是布尔值，以避免来自react的警告消息(在非布尔属性上接收布尔值)。

我有个办法。

带有条件句:

<Label
    {...{
      text: label,
      type,
      ...(tooltip && { tooltip }),
      isRequired: required
    }}
/>

我仍然喜欢使用常规的传递道具的方式，因为在没有任何条件的情况下，它更具可读性(在我看来)。

不带条件句:

<Label text={label} type={type} tooltip={tooltip} isRequired={required} />

推荐文章