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

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

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

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

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

当前回答

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

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

其他回答

在我看来,管理多个条件道具的最佳方法是@brigand中的道具对象方法。但是可以对其进行改进,以避免为每个条件道具添加一个if块。

ifVal helper

重命名为你喜欢的(iv, condVal, cv, _,…)

你可以定义一个helper函数,在满足条件时返回一个值或另一个值:

// components-helpers.js
export const ifVal = (cond, trueValue=true, falseValue=null) => {
  return cond ? trueValue : falseValue
}

如果cond为真(或真),则返回trueValue -或真。 如果cond为false(或falsy),则返回false value -或null。

这些默认值(true和null)通常是允许道具传递或不传递给React组件的正确值。你可以把这个函数看作是一个“改进的React三元运算符”。如果您需要对返回值有更多的控制,请改进它。

让我们用很多道具来使用它。

构建(复杂的)道具对象

// your-code.js
import { ifVal } from './components-helpers.js'

// BE SURE to replace all true/false with a real condition in you code
// this is just an example

const inputProps = {
  value: 'foo',
  enabled: ifVal(true), // true
  noProp: ifVal(false), // null - ignored by React
  aProp: ifVal(true, 'my value'), // 'my value'
  bProp: ifVal(false, 'the true text', 'the false text') // 'my false value',
  onAction: ifVal(isGuest, handleGuest, handleUser) // it depends on isGuest value
};

 <MyComponent {...inputProps} />

这种方法类似于使用classnames实用程序有条件地管理类的流行方法,但适用于props。

为什么要使用这种方法

您将拥有一个干净且可读的语法,即使有许多条件道具:每个新道具只需在对象声明中添加一行代码。

通过这种方式,您可以替换重复操作符的语法噪声(…, &&, ?:,…),当你用一个简单的函数调用有很多道具时,这可能是非常烦人的。

作为开发人员,我们的首要任务是编写最明显的代码来解决问题。 太多时候,我们只是为了自我而解决问题,在不必要的地方增加了复杂性。 我们的代码应该简单明了,无论是对今天的我们,还是对明天的我们,还是对我们的伴侣。

我们能做某事并不意味着我们就应该做

我希望这么晚的回复能有所帮助。

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

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

如果您使用ECMAScript 6,您可以像这样简单地编写。

// First, create a wrap object.
const wrap = {
    [variableName]: true
}
// Then, use it
<SomeComponent {...{wrap}} />

在React中,我们将值作为Props从父组件传递给子组件。如果值为false,则不会将其作为道具传递。在某些情况下,我们也可以使用三元(条件运算符)。