我有一个组件需要检查多个选项并根据这些选项返回。因此,我创建了一个在我的组件返回语句中调用的外部函数,以确定将返回的格式:
render() {
const { policy } = this.props;
let deployment = policy.Deployment;
let value = policy.value;
let policyLegend = deployment.policyLegend;
let policyObj = this.valueToPolicy(policyLegend, value);
console.log(policyObj);
if(policy.name == "SP4") {
policyLegend[1].values = this.formatSp4Firmware(policyLegend[1]);
return (
<div>
<Form onSubmit={ (event) => this.handleSubmit(event, this.props) }>
{
policyLegend.map((policy) => {
return (
<div key={ policy.id }>
<h3>{ policy.displayName }</h3>
{ this.renderSp4Policies(policy) }
</div>
);
})
}
<Button name={ 'Submit' } type='submit'>Submit</Button>
<Button onClick={ this.props.onCancel }>Cancel</Button>
</Form>
</div>
)
}
}
renderSp4Policies(policy) {
if(policy.displayName == "Firmware Options") {
let firmwareDropdownNames = this.formatFirmawareDropdownNames(policy);
let toggles = policy.values[0][Object.keys(policy.values[0])];
let toggleOptions = []
Object.keys(toggles).map(toggle => {
if(typeof(toggles[toggle]) == "boolean"){
var obj = {};
obj[toggle] = toggles[toggle];
toggleOptions.push(obj);
}
})
return (
toggleOptions.map(toggleOption => {
let toggleName = Object.keys(toggleOption).toString();
return (
<Form.Field key={ toggleName }>
<label>{ toggleName }</label>
<Checkbox toggle />
</Form.Field>
)
})
)
} else {
return (
policy.values.map(value => {
return(
<Form.Field key={ value.name }>
<label>{ value.displayName || value.name }</label>
<Checkbox toggle />
</Form.Field>
)
}
)
)
}
}
我已经应用了上一篇文章给出的一些答案,取得了一定的成功。
在renderSp4Policies
else
语句中显示的内容,但原始if(policy.displayName == "Firmware Options")
不返回任何内容。
感谢所有建议,提前谢谢!