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

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

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

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

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

当前回答

此外,还可以将其他值设置为布尔值

const MyComponent = function() {
    const Required = "yes";

    return (
         <input
                      required={Required === "yes"}
                      type="text"
                      key={qs.Name}
                      name="DefaultValue"
                      label={qs.QuestionTitle}
                      onChange={(event) => handleInputChange(index, event)}
                      placeholder={qs.QuestionTitle}
                    />
    );
}

其他回答

胡德马科的答案通常是正确的,但这里有另一种选择。

创建一个你喜欢的对象:

var inputProps = {
  value: 'foo',
  onChange: this.handleChange
};

if (condition) {
  inputProps.disabled = true;
}

渲染与蔓延,可选的传递其他道具也。

<input
    value="this is overridden by inputProps"
    {...inputProps}
    onChange={overridesInputProps}
 />

如果是有限数量的属性,这将做


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

如果您有大量的属性,那么很难为每个属性编写If else条件并相应地返回。为此,您可以将这些属性推入到对象中,并在返回元素中使用展开操作符。

    function MyInput({ prop1, prop2, ...propN }) {
        const props = {};
        if (prop1) props.prop1 = prop1;
        .
        .
        .
        if (propN) props.propN = propN;
        return <input classname="foo" {...props} />
    }
<input checked={true} type="checkbox"  />

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

<a data-tooltip={sidebarCollapsed?'Show details':undefined}></a>
<Button {...(isWeb3Enabled ? {} : { isExternal: true })}>
    Metamask
</Button>