如何有条件地将属性添加到 React 组件？

javascript reactjs

2022-08-29 22:15:34

有没有办法只在满足特定条件时才向 React 组件添加属性？

我应该在渲染后根据Ajax调用将必需属性和readOnly属性添加到表单元素中，但我看不到如何解决这个问题，因为这与完全省略属性不同。readOnly="false"

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

（解析错误：意外标识符）

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

答案 1

显然，对于某些属性，React 足够智能，如果你传递给它的值不真实，可以省略该属性。例如：

const InputComponent = function() {
    const required = true;
    const disabled = false;

    return (
        <input type="text" disabled={disabled} required={required} />
    );
}

将导致：

<input type="text" required>

更新：如果有人好奇这种情况是如何/为什么发生的，你可以在ReactDOM的源代码中找到详细信息，特别是在DOMProperty.js文件的第30行和第167行。

答案 2

Juandemarco的答案通常是正确的，但这是另一种选择。

按照您喜欢的方式构建对象：

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

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

使用跨页进行渲染，也可以选择传递其他道具。

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