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

42 浏览
0 Comments

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

是否有一种方法可以只在满足某种条件时向React组件添加属性？

我需要根据渲染后的Ajax调用向表单元素添加required和readOnly属性，但我不知道如何解决这个问题，因为readOnly="false"与完全省略该属性不同。

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

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

function MyInput({isRequired}) {
  return 
}

0

2 答案

0 Comments

juandemarco的答案通常是正确的，但这里是另一个选项。

按照您的喜好构建一个对象：

var inputProps = {
  value: 'foo',
  onChange: this.handleChange
};
if (condition) {
  inputProps.disabled = true;
}

使用展开操作符进行渲染，还可以选择传递其他props。

0
0 Comments

显然，对于某些属性，如果您传递给它的值不是真值，React会智能地省略该属性。例如：

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

将会导致：

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

0