是否有一种方法只在满足特定条件时才向React组件添加属性?
我应该添加必需的和readOnly属性，以形成基于Ajax调用后呈现的元素，但我不知道如何解决这个问题，因为readOnly="false"并不等同于完全省略属性。
下面的例子应该解释我想要什么，但它不起作用。
(解析错误:意外的标识符)
function MyInput({isRequired}) {
return <input classname="foo" {isRequired ? "required" : ""} />
}
当前回答
如果您使用ECMAScript 6，您可以像这样简单地编写。
// First, create a wrap object.
const wrap = {
[variableName]: true
}
// Then, use it
<SomeComponent {...{wrap}} />
其他回答
显然，对于某些属性，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行。
假设我们想要在条件为真时添加一个自定义属性(使用aria-*或data-*):
{...this.props.isTrue && {'aria-name' : 'something here'}}
假设我们想在条件为真时添加一个style属性:
{...this.props.isTrue && {style : {color: 'red'}}}
在我看来，管理多个条件道具的最佳方法是@brigand中的道具对象方法。但是可以对其进行改进，以避免为每个条件道具添加一个if块。
ifVal helper
重命名为你喜欢的(iv, condVal, cv， _，…)
你可以定义一个helper函数，在满足条件时返回一个值或另一个值:
// components-helpers.js
export const ifVal = (cond, trueValue=true, falseValue=null) => {
return cond ? trueValue : falseValue
}
如果cond为真(或真)，则返回trueValue -或真。 如果cond为false(或falsy)，则返回false value -或null。
这些默认值(true和null)通常是允许道具传递或不传递给React组件的正确值。你可以把这个函数看作是一个“改进的React三元运算符”。如果您需要对返回值有更多的控制，请改进它。
让我们用很多道具来使用它。
构建(复杂的)道具对象
// your-code.js
import { ifVal } from './components-helpers.js'
// BE SURE to replace all true/false with a real condition in you code
// this is just an example
const inputProps = {
value: 'foo',
enabled: ifVal(true), // true
noProp: ifVal(false), // null - ignored by React
aProp: ifVal(true, 'my value'), // 'my value'
bProp: ifVal(false, 'the true text', 'the false text') // 'my false value',
onAction: ifVal(isGuest, handleGuest, handleUser) // it depends on isGuest value
};
<MyComponent {...inputProps} />
这种方法类似于使用classnames实用程序有条件地管理类的流行方法，但适用于props。
为什么要使用这种方法
您将拥有一个干净且可读的语法，即使有许多条件道具:每个新道具只需在对象声明中添加一行代码。
通过这种方式，您可以替换重复操作符的语法噪声(…， &&， ?:，…)，当你用一个简单的函数调用有很多道具时，这可能是非常烦人的。
作为开发人员，我们的首要任务是编写最明显的代码来解决问题。 太多时候，我们只是为了自我而解决问题，在不必要的地方增加了复杂性。 我们的代码应该简单明了，无论是对今天的我们，还是对明天的我们，还是对我们的伴侣。
我们能做某事并不意味着我们就应该做
我希望这么晚的回复能有所帮助。
例如，为自定义容器使用属性样式
const DriverSelector = props => {
const Container = props.container;
const otherProps = {
...( props.containerStyles && { style: props.containerStyles } )
};
return (
<Container {...otherProps} >
如果您使用ECMAScript 6，您可以像这样简单地编写。
// First, create a wrap object.
const wrap = {
[variableName]: true
}
// Then, use it
<SomeComponent {...{wrap}} />
