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

Question

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

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

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

Answer 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 函数时该怎么办。