我有一个组件需要检查多个选项并根据这些选项返回。因此,我创建了一个在我的组件返回语句中调用的外部函数,以确定将返回的格式:
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>
)
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
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>
)
}
)
)
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
编辑
我已经应用了一些给出的答案并取得了一定的成功。
在 renderSp4Policies
中,显示 else
语句中返回的内容,但开头 if(policy.displayName == "Firmware Options")
什么都不返回。
感谢所有建议,提前致谢!
最佳答案
您的 map
函数不返回任何内容:
policy.values.map(value => {
<Form.Field key={ value.name }>
<label>{ value.displayName || value.name }</label>
<Checkbox toggle />
</Form.Field>
}
使用箭头功能 block {}
时,您应该添加显式的 return
语句:
policy.values.map(value => {
return(<Form.Field key={ value.name }>
<label>{ value.displayName || value.name }</label>
<Checkbox toggle />
</Form.Field>)
}
编辑
作为您评论的后续。
至于第一个if
语句,不要使用forEach
,使用map
。与您在第二个 if
语句中所做的相同(不要忘记 return
!)
renderSp4Policies(policy) {
if (policy.displayName == "Firmware Options") {
let toggles = policy.values[0][Object.keys(policy.values[0])];
Object.keys(toggles).forEach(toggle => {
if (typeof (toggles[toggle]) !== "boolean") {
delete toggles[toggle];
}
})
return (
Object.keys(toggles).map(toggle => {
return (
<Form.Field key={toggle}>
<label> {toggle} </label>
<Checkbox toggle />
</Form.Field>
);
})
)
} else {
return (
policy.values.map(value => {
<Form.Field key={value.name}>
<label>{value.displayName || value.name}</label>
<Checkbox toggle />
</Form.Field>
})
);
}
}
关于javascript - 从函数返回 JSX,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47658250/