带有条件表数据道具的类组件

Question

我有一个react类组件，它由一个表组成。表有一个编辑和删除按钮，如果用户没有登录，我想禁用它。我有一个isAuthenticated值，用于检查用户是否未登录

Answer 1

给这只猫剥皮的方法不止一种。一种方法是为链接

创建自定义组件。

const DisablableLink = ({disabled = false, children, ...rest}) => 
disabled 
? <span style={{color: '#CCCCCC'}}>{children}</span>
: <Link {...rest} >{children}</Link>

这将允许您执行以下操作:

1. 您可以通过将disabled作为true来禁用链接
2. 样式化已禁用和启用的组件

下面是你的代码。(我假设isAuthenticated来自道具。

const Exercise = props => (
<tr>
<td>{props.exercise.username}</td>
<td>{props.exercise.description}</td>
<td>{props.exercise.duration}</td>
<td>{props.exercise.date.substring(0,10)}</td>
<td>( 
<DisablableLink disabled={!props.isAuthenticated} to={"/edit/"+props.exercise._id}>edit</DisablableLink> | <DisablableLink disabled={!props.isAuthenticated} onClick={() => { props.deleteExercise(props.exercise._id) }}>delete</DisablableLink>
) 
</td>
</tr>
)

我已经为您创建了一个Codesandbox示例