javascript 空字符串是否为React Link的有效值?

ycl3bljg  于 2023-02-18  发布在  Java
关注(0)|答案(4)|浏览(119)

我正在写一个React.js应用程序,我想使用react-router包中的Link组件,以便有条件地将用户重定向到另一个页面。如果某些条件不成立,我会将to属性设置为空字符串,这样可以工作,不会导致页面重载,页面会保持在原来的位置。但我想知道这是否是最佳实践?
这是我的解决方案:

import { Link } from 'react-router';

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

我在documentation中没有看到任何关于空字符串输入的内容。

s8vozzvw

s8vozzvw1#

我从来没有在HTML或React中将某个东西链接到任何东西。也就是说,你似乎没有什么选择:

    • 选项1**有条件地呈现div而不是to属性。如果条件为真,则显示Link(带div),如果不显示div(不带Link)。这可能是更"常见"的方法。如果您的div不像"我的内容"那样简单,我会将其移到功能组件中。并使用该组件代替下面所示的<div>MyContent</div>
import { Link } from 'react-router';

{ condition ? 
   (
     <Link to='/some/other/url'>
      <div>My Content</div>
     </Link>
   ) : ( <div>My Content</div> )
}
    • 选项2**执行您所做的操作,但使用#而不是空字符串。
import { Link } from 'react-router';

<Link to={condition === true ? '/some/other/url' : '#'}>
    <div>
        my content
    </div>
</Link>
    • 选项3**如果条件为假,则禁用链接。
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>

希望能有所帮助。

a8jjtwal

a8jjtwal2#

toLink的必选属性,如果url为空,最好隐藏整个组件:

{
      condition && (
        <Link to={"/some/other/url"}>
          <div>my content</div>
        </Link>
      );
    }

如果出于某种奇怪的原因,你需要一个空的url,你可以传递一个空格:

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

jtjikinw3#

使用<BUTTON>代替,你将有相同的伪像:活动,:焦点作为链接,它将摆脱警告。
一般安装:eslint; sonarlint扩展...他们会给予你像这样的小错误的建议和行业标准。

58wvjzkj

58wvjzkj4#

使用“javascript.void(0)”而不是使用空字符串。
从“React路由器”导入{Link};
我的内容
请参考文档What does "javascript:void(0)" mean?

相关问题