是否有一种方法只在满足特定条件时才向React组件添加属性?
我应该添加必需的和readOnly属性，以形成基于Ajax调用后呈现的元素，但我不知道如何解决这个问题，因为readOnly="false"并不等同于完全省略属性。
下面的例子应该解释我想要什么，但它不起作用。
(解析错误:意外的标识符)
function MyInput({isRequired}) {
return <input classname="foo" {isRequired ? "required" : ""} />
}
当前回答
我认为这可能对那些希望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}
/>
);
}
}
其他回答
在React中，我们将值作为Props从父组件传递给子组件。如果值为false，则不会将其作为道具传递。在某些情况下，我们也可以使用三元(条件运算符)。
您可以使用相同的快捷方式，用于添加/删除组件({isVisible && <SomeComponent />})的(部分)。
class MyComponent extends React.Component {
render() {
return (
<div someAttribute={someCondition && someValue} />
);
}
}
我认为这可能对那些希望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}
/>
);
}
}
使用undefined适用于大多数属性:
const name = "someName";
return (
<input name={name ? name : undefined} />
);
这应该是可行的，因为在Ajax调用之后，您的状态将会改变，并且父组件将重新呈现。
render : function () {
var item;
if (this.state.isRequired) {
item = <MyOwnInput attribute={'whatever'} />
} else {
item = <MyOwnInput />
}
return (
<div>
{item}
</div>
);
}
