React Link 的空字符串是有效值吗? [英] Is empty string valid value for React Link?

问题描述

我正在写一个 React.js 应用程序，我想在其中使用 react-router 包中的 Link 组件，以便有条件地将用户重定向到另一个页面.如果某些条件不成立，我将 to 道具设置为空字符串，该字符串有效并且不会导致页面重新加载并且页面保持在与原来完全相同的位置.但我想知道这是否是最佳做法?

这是我的解决方案:

import { Link } from 'react-router';<Link to={condition === true ?'/some/other/url' : ''}><div>我的内容

</链接>

我在 文档 关于空字符串输入.

解决方案

我从未在 HTML 或 React 中将任何内容与任何内容联系起来.也就是说，您似乎只有几个选择:

选项 1有条件地呈现 div 而不是 to 属性.如果 codition 为真，则显示 Link 和 div 如果不显示 div，则没有 Link.这可能是更常见"的方式来做到这一点.如果您的 div 不像我的内容"那么简单，我会将其移动到功能组件中.并使用该组件而不是如下所示的

MyContent

.

import { Link } from 'react-router';{ 状况 ?(<链接到='/some/other/url'><div>我的内容</div></链接>) :( <div>我的内容</div> )}

选项 2做你所做的，但使用 # 而不是空字符串.

import { Link } from 'react-router';<Link to={condition === true ?'/some/other/url' : '#'}><div>我的内容

</链接>

选项 3 如果条件为假，则禁用链接.

import { Link } from 'react-router';//这里可能有更好的名字const handleLinkDisable = (e) =>{const { 条件 } = this.state;//假设它来自状态if(condition){ e.preventDefault();}};<Link to='/some/other/url' onClick={handleLinkDisable}><div>我的内容</div></链接>

希望有所帮助.

I'm writing a React.js application where I want to use Link component from react-router package in order to conditionally redirect a user to another page. If some condition doesn't hold I set the to prop to empty string which works and doesn't cause page reload and the page stays in the exact same place it was. But I'm wondering if this is the best practice?

This is my solution:

import { Link } from 'react-router';

<Link to={condition === true ? '/some/other/url' : ''}>
    <div>
        my content
    </div>
</Link>

I don't see anything in the documentation regarding empty string input.

解决方案

I've never linked something to nothing in HTML or React. That said, it seems you have few options:

Option 1 Conditionally render the div not the to attribute. If codition is true show Link with div if not show div with no Link. This is probably the more "common" way to do this. If your div is not as simple as 'My Content' I would move it into a functional Component. And use that component instead of <div>MyContent</div> shown below.

import { Link } from 'react-router';

{ condition ? 
   (
     <Link to='/some/other/url'>
      <div>My Content</div>
     </Link>
   ) : ( <div>My Content</div> )
} 

Option 2 Do what you did but use the # instead of an empty string.

import { Link } from 'react-router';

<Link to={condition === true ? '/some/other/url' : '#'}>
    <div>
        my content
    </div>
</Link>

Option 3 Disable the link if the condition is false.

import { Link } from 'react-router';

//a better name might be in order here
const handleLinkDisable = (e) => {
  const { condition }  = this.state; //just assuming it comes from state
  if(condition){ e.preventDefault(); }
}; 

<Link to='/some/other/url' onClick={handleLinkDisable}>
  <div>My Content</div>
</Link> 

Hope that helps.

这篇关于React Link 的空字符串是有效值吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！