是否有一种方法只在满足特定条件时才向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" />
);
其他回答
如果您使用ECMAScript 6，您可以像这样简单地编写。
// First, create a wrap object.
const wrap = {
[variableName]: true
}
// Then, use it
<SomeComponent {...{wrap}} />
在我看来，管理多个条件道具的最佳方法是@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 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}
/>
);
}
<Button {...(isWeb3Enabled ? {} : { isExternal: true })}>
Metamask
</Button>
我认为这可能对那些希望attribute的值是一个函数的人有用:
import { RNCamera } from 'react-native-camera';
[...]
export default class MyView extends React.Component {
_myFunction = (myObject) => {
console.log(myObject.type); //
}
render() {
var scannerProps = Platform.OS === 'ios' ?
{
onBarCodeRead : this._myFunction
}
:
{
// here you can add attribute(s) for other platforms
}
return (
// it is just a part of code for MyView's layout
<RNCamera
ref={ref => { this.camera = ref; }}
style={{ flex: 1, justifyContent: 'flex-end', alignItems: 'center', }}
type={RNCamera.Constants.Type.back}
flashMode={RNCamera.Constants.FlashMode.on}
{...scannerProps}
/>
);
}
}
