Question

我希望能够在validation.js文件中调用getIcon函数，然后希望能够查看是否使用了绿色图标，然后以绿色文本打印出来了（t / f）假。其余文本都可以，红色图标显示红色文本。

添加天数功能只是在检查其有效期。

验证文件

 const validation = props => {
      return (
        <div className='MyAccessGridItem' style={{flexDirection: 'column'}}>
          <div>
            <b>Validation ID: </b>
            {!props.request.access_validation_id ? 'None' : props.request.access_validation_id}
      </div>

      <div>
        <b>Validator: </b>
        {!props.request.validator ? 'None' : props.request.validator.full_name}
      </div>

      <div>
        <b>Date: </b>
        {!props.request.validation_timestamp ? 'None' : formatUTCDateToCurrentDate(props.request.validation_timestamp).split(' ')[0]}
      </div>

      <b style={{color: getColor('action', props.request.is_valid && new Date(props.validation_timestamp) < addDays(-90)  ? 'green' : 'red'  )}}>Expired(T/F):
        {props.request.is_valid == null ? ' None' : props.request.is_valid ? ' TRUE' : ' FALSE'  }
      </b>
    </div>
  )
}

validation.propTypes = {
  request: PropTypes.object
}

export default React.memo(validation)

验证时间戳文件

const validationTimestamp = props => {

      
      const getIcon = (access) => {
        if(!access.validation_timestamp || new Date(access.validation_timestamp) < addDays(-90)) { 
          return <WarningIcon style={{height: '0.8em', width: '0.8em', color: getColor('action', 'red')}} />
        }
        else if(new Date(access.validation_timestamp) < addDays(-76)) {
          return <WarningIcon style={{height: '0.8em', width: '0.8em', color: getColor('action', 'yellow')}} />
        }
        else
          return <CheckCircleIcon style={{height: '0.8em', width: '0.8em', color: getColor('action', 'green')}} />
      }
    
    
    
      return (
        <div className='MyAccessGridItem'>
          {getIcon(props.request)}
          
          
          <div style={{marginLeft: '4px'}}>
            {!props.request.validation_timestamp ? 'Not yet validated' :
              formatUTCDateToCurrentDate(props.request.validation_timestamp).split(' ')[0]
            }
          </div>
        </div>
      )
    }
    
    validationTimestamp.propTypes = {
      request: PropTypes.object
    }
    
    export default React.memo(validationTimestamp)

Answer 1

在单独的函数中添加到期条件，然后重新使用

const isValid = (access) => {
       if(!access.validation_timestamp || new Date(access.validation_timestamp) < addDays(-90)) { 
          return 1;
        }
        else if(new Date(access.validation_timestamp) < addDays(-76)) {
          return 2;
        }
        else
          return 3;
}

现在，您可以更改getIcon（）以使用此函数并返回适当的图标。同样，您可以使用相同的功能选择“过期”文本的颜色。

  const getIcon = (access) => {
    if(isValid(access) == 1) { 
      return <WarningIcon style={{height: '0.8em', width: '0.8em', color: getColor('action', 'red')}} />
    }
    else if(isValid(access) == 2) {
      return <WarningIcon style={{height: '0.8em', width: '0.8em', color: getColor('action', 'yellow')}} />
    }
    else
      return <CheckCircleIcon style={{height: '0.8em', width: '0.8em', color: getColor('action', 'green')}} />
  }

将文字更改为

<b style={{color: isValid(props.request) ? 'green' : 'red'  )}}>Expired(T/F):
        {props.request.is_valid == null ? ' None' : props.request.is_valid ? ' TRUE' : ' FALSE'  }
      </b>

如何从组件访问另一个功能

1 个答案: