是否可以在 React 中将条件作为道具发送？

Posted 2023-02-22

【中文标题】是否可以在 React 中将条件作为道具发送？

【英文标题】：Is it possible to send a condition as prop in React?

【发布时间】：2020-12-07 17:05:45

【问题描述】：

我一直想知道是否有办法将条件作为道具发送给需要一些条件渲染并迭代一组动态对象的子组件。

假设我想要有条件地渲染其中一个对象，所以做这样的事情：

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>        
    )

【问题讨论】：

您能介意在您的代码中提供更多详细信息吗？这个问题现在还不是很清楚。

您还介意添加代码吗？

我在那里添加了一些代码。

查看您的代码，您已经实现了条件渲染。只需将 obj.conditional 更改为 obj.condition。如果条件为真，将进行渲染。顺便说一句 - 永远不要使用索引作为键，为每个孩子使用唯一的值。

【参考方案1】：

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 对象中没有定义 condition 函数时该怎么办。

【讨论】：

这对我来说不是很清楚。我应该发送“toRender”变量作为条件吗？

我使用您添加到问题中的代码编辑了答案