是否有一种方法只在满足特定条件时才向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" />
);
其他回答
胡德马科的答案通常是正确的，但这里有另一种选择。
创建一个你喜欢的对象:
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} />
}
对于React[1]列出的一些布尔属性:
<input disabled={disabled} />
// renders either `<input>` or `<input disabled>`
其他属性:
<div aria-selected= {selected ? "" : undefined} />
// renders either `<div aria-selected></div>` or `<div></div>`
[1]布尔属性列表:https://github.com/facebook/react/blob/3f9480f0f5ceb5a32a3751066f0b8e9eae5f1b10/packages/react-dom/src/shared/DOMProperty.js#L318-L345
下面是一个通过React-Bootstrap(0.32.4版本)使用Bootstrap按钮的例子:
var condition = true;
return (
<Button {...(condition ? {bsStyle: 'success'} : {})} />
);
根据条件，将返回{bsStyle: 'success'}或{}。然后，扩展操作符将返回对象的属性扩展到Button组件。在falsy情况下，由于返回的对象上不存在任何属性，因此不会向组件传递任何内容。
另一种基于Andy Polhill评论的方法是:
var condition = true;
return (
<Button bsStyle={condition ? 'success' : undefined} />
);
唯一的小区别是，在第二个例子中，内部组件<Button/>的props对象将有一个值为undefined的键bsStyle。
在react函数组件中，你可以尝试这样做来省略不必要的标签属性。
<div className="something" ref={someCondition ? dummyRef : null} />
这适用于我，如果我需要省略标签，如ref, class等。但我不知道这是否适用于每个标签属性
