是否有一种方法只在满足特定条件时才向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 })} />
);
其他回答
假设我们想要在条件为真时添加一个自定义属性(使用aria-*或data-*):
{...this.props.isTrue && {'aria-name' : 'something here'}}
假设我们想在条件为真时添加一个style属性:
{...this.props.isTrue && {style : {color: 'red'}}}
我有个办法。
带有条件句:
<Label
{...{
text: label,
type,
...(tooltip && { tooltip }),
isRequired: required
}}
/>
我仍然喜欢使用常规的传递道具的方式，因为在没有任何条件的情况下，它更具可读性(在我看来)。
不带条件句:
<Label text={label} type={type} tooltip={tooltip} isRequired={required} />
如果是有限数量的属性，这将做
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} />
}
您可以使用相同的快捷方式，用于添加/删除组件({isVisible && <SomeComponent />})的(部分)。
class MyComponent extends React.Component {
render() {
return (
<div someAttribute={someCondition && someValue} />
);
}
}
在react函数组件中，你可以尝试这样做来省略不必要的标签属性。
<div className="something" ref={someCondition ? dummyRef : null} />
这适用于我，如果我需要省略标签，如ref, class等。但我不知道这是否适用于每个标签属性
