reactjs - 如何从组件访问另一个功能
问题描述
我希望能够在validation.js 文件中调用getIcon 函数,然后我希望能够检查是否使用了绿色图标,然后以绿色文本expired(t/f) false 打印出来。文本的其余部分很好,红色图标显示红色文本。
添加天数功能只是检查其到期时间。
验证文件
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)
解决方案
在单独的函数中添加到期条件,然后重用它
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>
推荐阅读
- r - 在 R 中总结(跨(哪里))
- rx-swift - RxSwift:如何并行运行多个 Observable
- python - 如何将json的内容写入python中的csv文件?
- kotlin - 从列表中过滤 3000 到 3500 之间的值
- vue.js - How can I react to whether the browser is in fullscreen mode?
- reporting-services - SSRS 上的资源文件位置
- xml - 将5个关于产品的xml文件转换为一个文件
- python - python在文本/ excel文件中使用凭据执行机器人,循环直到列表末尾
- unit-testing - 为什么将 spyon 与模拟实现一起使用而不是 jest.fn?
- php - 如何在标记内添加多个值?(PDO 执行)