如何解决是否可以在React中发送条件作为prop?
我一直在想是否有一种方法可以将条件作为道具发送给需要一些条件渲染并迭代一组动态对象的子组件。
比方说,我希望有条件地渲染其中一个对象,因此请执行以下操作:
const Content = [{
object: "One",value: one,name: "object1"
},{
object: "Two",value: two,name: "object2",condition: object1.value === "One"
}]
因此,根据第一个对象的值(假设它是一个选择标签),我希望第二个对象被呈现。
然后我们有对象:
然后,在组件内部,我将迭代对象并有条件地呈现输入或选择。
有什么想法吗?预先感谢。
编辑:
这是组件
function FormCase ({ onSubmit,register,content }) {
return (
<Form id="form" onSubmit={onSubmit}>
<Row className="form-row">
{content.map((obj,idx) => {
return (
obj.conditional &&
<div className="form-group" key={idx}>
<label>{obj.name}</label>
<input className="form-control" value={obj.value} />
</div>
)
})}
</Row>
<Row className="submit-row">
<input type="submit" value="Create" />
</Row>
</Form>
)
}
解决方法
const content = [{
object: "One",value: one,name: "object1"
},{
object: "Two",value: two,name: "object2",condition: value => value === "One"
}]
// while rendering
const toRender = content.filter(item => !item.condition || item.condition("some value"));
// or filter function of your choice
然后只渲染过滤的项目。
编辑:
function FormCase ({ onSubmit,register,content }) {
return (
<Form id="form" onSubmit={onSubmit}>
<Row className="form-row">
{content.map((obj,idx) => {
if (idx > 0) { // don't check the condition for first
return (
obj.condition && obj.condition(content[idx-1].value) &&
<div className="form-group" key={idx}>
<label>{obj.name}</label>
<input className="form-control" value={obj.value} />
</div>
)
} else {
return (
<div className="form-group" key={idx}>
<label>{obj.name}</label>
<input className="form-control" value={obj.value} />
</div>
)
}
})}
</Row>
<Row className="submit-row">
<input type="submit" value="Create" />
</Row>
</Form>
)
}
因此,您只需在condition
数组中将函数作为content
传递即可。在渲染期间,您应该检查condition
,其中前一项值为函数的参数。
您应该调整逻辑-condition
对象中没有定义content
函数时该怎么办。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。