是否有一种方法只在满足特定条件时才向React组件添加属性?
我应该添加必需的和readOnly属性，以形成基于Ajax调用后呈现的元素，但我不知道如何解决这个问题，因为readOnly="false"并不等同于完全省略属性。
下面的例子应该解释我想要什么，但它不起作用。
(解析错误:意外的标识符)
function MyInput({isRequired}) {
return <input classname="foo" {isRequired ? "required" : ""} />
}
当前回答
我有个办法。
带有条件句:
<Label
{...{
text: label,
type,
...(tooltip && { tooltip }),
isRequired: required
}}
/>
我仍然喜欢使用常规的传递道具的方式，因为在没有任何条件的情况下，它更具可读性(在我看来)。
不带条件句:
<Label text={label} type={type} tooltip={tooltip} isRequired={required} />
其他回答
使用undefined适用于大多数属性:
const name = "someName";
return (
<input name={name ? name : undefined} />
);
例如，为自定义容器使用属性样式
const DriverSelector = props => {
const Container = props.container;
const otherProps = {
...( props.containerStyles && { style: props.containerStyles } )
};
return (
<Container {...otherProps} >
此外，还可以将其他值设置为布尔值
const MyComponent = function() {
const Required = "yes";
return (
<input
required={Required === "yes"}
type="text"
key={qs.Name}
name="DefaultValue"
label={qs.QuestionTitle}
onChange={(event) => handleInputChange(index, event)}
placeholder={qs.QuestionTitle}
/>
);
}
假设我们想要在条件为真时添加一个自定义属性(使用aria-*或data-*):
{...this.props.isTrue && {'aria-name' : 'something here'}}
假设我们想在条件为真时添加一个style属性:
{...this.props.isTrue && {style : {color: 'red'}}}
<input checked={true} type="checkbox" />
