Question

当API向前端发送错误时，我想使用Link中react-router-dom组件中的props而不是a标签。这可能吗？

React中的代码：

{
    errors.activateAccount && (
        <div className="invalid-feedback" dangerouslySetInnerHTML={{__html: 
    errors.activateAccount}}/>
     )
}

Api的响应：

if (!user.activated) {
  errors.activateAccount = 'Here comes the error message with a <a href="/">link</a>.';
  return res.status(400).send(errors);
}

Answer 1

我个人认为，通过后端进行操作不是一个好选择，您可以简单地传递一条消息并使用React处理前端应用程序中的外观。

来自API的响应：

if (!user.activated) {
  errors.activateAccount = 'Simple Message';
  return res.status(400).send(errors);
}

在React App中，您可以获得响应并在组件中执行。

// inside render() Method
render() {
  if(errors.activateAccount.length > 0){
    // Now you return the message composed in Link Component.
    return <Link>{errors.activateAccount.message}</Link>
  } else {
    // Now you return your default component or anything you want
  }
}

ReactJS：在道具中使用Link而不是a-tag

1 个答案: