时间戳

首页 > 解决方案 > 如果条件在 React 中添加组件道具

reactjs - 如果条件在 React 中添加组件道具

问题描述

我有一个React Input 组件，如果条件为真，我希望它显示一个错误图标。目前，我通过一个if条件来实现它，该条件在条件为真时呈现带有图标的组件，而在其他情况下则呈现另一个组件：

   if (field_meta.error) {
      return (
        <FormControl fullWidth margin="normal">
          <InputLabel style={{color: "red"}} htmlFor={field_meta.name}>{field_meta.title}</InputLabel>
          <Input
            id={field_meta.name}
            defaultValue={field_meta.value? field_meta.value: ""}
            onChange={this.handleChange}
            margin="normal"
            startAdornment={  // ***** This is the props that depends on the condition
              <InputAdornment position="start">
                <i style={{color: "red"}} className="zmdi zmdi-alert-circle zmdi-hc-fw"/>
              </InputAdornment>
            }
          />
          <FormHelperText style={{color: "red"}}>{field_meta.error}</FormHelperText>
        </FormControl>
      )
    } else {
        return (
            <FormControl fullWidth margin="normal">
                <InputLabel htmlFor={field_meta.name}>{field_meta.title}</InputLabel>
                <Input
                  id={field_meta.name}
                  defaultValue={field_meta.value? field_meta.value: ""}
                  onChange={this.handleChange}
                  margin="normal"
                />
            </FormControl>
        )
    }

我认为必须有一种更有效的方法来执行此操作，而无需根据条件渲染两个完全不同的组件，可能仅通过调节包含特定道具的条件，但我找不到如何做到这一点。

标签： reactjs

解决方案

当然。您可以通过短路来做到这一点：

 <FormControl fullWidth margin="normal">
          <InputLabel style={field_meta.error && {color: "red"}} htmlFor={field_meta.name}>{field_meta.title}</InputLabel>
          <Input
            id={field_meta.name}
            defaultValue={field_meta.value? field_meta.value: ""}
            onChange={this.handleChange}
            margin="normal"
            startAdornment={  field_meta.error && (
              <InputAdornment position="start">
                <i style={{color: "red"}} className="zmdi zmdi-alert-circle zmdi-hc-fw"/>
              </InputAdornment>)
            }
          />
          {field_meta.error && <FormHelperText style={{color: "red"}}>{field_meta.error}</FormHelperText>}
</FormControl>

推荐阅读