reactjs-与react.js中的ng-if等效吗?

我开始对使用angular做出反应,并且试图找出我可以基于条件渲染或不渲染元素的ng-if指令的替代方法。 以下面的代码为例。 我正在使用打字稿(tsx)顺便说一句,但这没什么大不了的。

"use strict";

import * as React from 'react';

interface MyProps {showMe: Boolean}
interface MyState {}

class Button extends React.Component <MyProps, MyState>{
  constructor(props){
    super(props);
    this.state = {};
  }

  render(){
    let button;
    if (this.props.showMe === true){
       button = (
        <button type="submit" className="btn nav-btn-red">SIGN UP</button>
      )
    } else {
      button = null;
    }
    return button;

}
}
export default Button;

该解决方案有效,但是通常还有另一种方法可以达到这种效果吗? 我只是在猜测

ceckenrode asked 2019-11-04T11:08:22Z
10个解决方案
58 votes

三元运算符呢?

render() {
  return (
    this.props.showMe ? <button type="submit" className="btn nav-btn-red">SIGN UP</button> : null
  );
}
Yuya answered 2019-11-04T11:08:33Z
17 votes

我出于历史目的将其保留在此处,在反应了一段时间后,请查看下面的编辑以获得更好的解决方案我最终创建了一个NgIf组件(这是本机反应,但可能适用于react)

码:

props.value

用法:

props.value

我对此并不陌生,因此可能会有所改进,但可以帮助我从Angular过渡

编辑

一旦我有更多的经验,请参阅下面的编辑以获得更好的解释

感谢下面的Jay评论,一个好主意也是:

props.value

要么

props.value

与其他一些答案类似,但是它们是内联的,而不是使用整个渲染块/函数,不需要特殊的组件,您可以将else语句与三元运算符一起使用。 如果父项不存在,则if语句中包含的项不会引发错误。 即,如果props.value不存在,则props.value.value2将不会引发错误。

查看此答案[https://stackoverflow.com/a/26152067]

编辑2:

根据上面的链接([https://stackoverflow.com/a/26152067)],经过更多的开发React应用程序的经验,上述方法并不是最好的方法。

实际上,有条件运算符的反应很容易使您着迷。 有两种处理方法:

//Show if someItem
{someItem && displayThis}

//Show if else
{someItem ? displayThisIfTrue : displayThisIfFalse}

您可能要注意的一个警告是,如果“ someItem”不是布尔表达式。 如果说0,则react将打印0或native将给您一个错误,提示您需要在文本元素中包装“ 0”。 对于虚假测试,这通常不是问题,但对于真实测试,将提出问题。 例如:

{!someItem && displayThis} //Will work just fine if item is 0 or null or "" etc
{someItem && displayThis} //Will print the value of someItem if its not falsy

我经常使用的把戏? 双重底片。

{!!someItem && displayThis}

请注意,这不适用于三元运算符(myVar?true:false),因为它会将结果隐式转换为布尔表达式。

Ryan Knell answered 2019-11-04T11:10:40Z
12 votes

如果您还有其他元素,则可以像这样包装条件:

render() {
  return (
    <div>Stuff</div>
    {this.props.showMe && (
      <button type="submit" className="btn nav-btn-red">SIGN UP</button>
    )}
    <div>More stuff</div>
  );
}
lundhjem answered 2019-11-04T11:11:06Z
8 votes

更好一点:

render() {
  return (
    this.props.showMe && <button type="submit" className="btn nav-btn-red">SIGN UP</button>
  );
}
sodoku answered 2019-11-04T11:11:29Z
2 votes

我可以想到至少三种不同的方法来在React中模拟ng-if功能

  • 如果
  • 开关
  • IIFE(立即调用的函数表达式)

您可以在此处阅读该文章:React组件中Angular的ng-if等效项

基本上,您想执行以下操作:

var IfDemoComponent = React.createClass({
  render: function() {
    var el = null;
    if (this.props.showMe) {
      el = (
        <div>
          I am only included in the DOM if this.props.showMe evaluates to true.
        </div>
      );
    }
   return el;
  }
});
Web Code Coach answered 2019-11-04T11:12:31Z
2 votes

我只想补充一点,即角度*ngIf不会实例化它所连接的组件。 在React中,如果在return语句中使用if语句,那么即使未显示该组件,它仍将实例化该组件。 为了在React中实现真正的*ngIf类型的行为,您必须创建一个变量,该变量将条件组件保留在return语句之外:

render() {

  const show = false

  return (
    if (show) {
       <AwesomeComponent />   //still instantiated
    }
  )
}

render() {

  let c = null
  const show = false

  if (show) {
    c = <AwesomeComponent />   //not instantiated
  }
  return (
    c
  )
}
Umair Ansari answered 2019-11-04T11:12:57Z
1 votes

falsenullundefinedtrue是有效的孩子。 他们根本不   渲染。 这些JSX表达式将全部呈现为同一事物:

所以你可以试试看

const conditional=({condition,someArray})=>{
     return(
        <div>
          {condition && <Header /> // condition being boolean} 
          {someArray.length>0 && <Content />}
        </div>
      )
}

这对于有条件地渲染React元素很有用。 此JSX仅呈现if条件为true的情况并且仅在someArray.length> 0时呈现

hannad rehman answered 2019-11-04T11:13:37Z
1 votes

我不喜欢代码中有很多三元运算符。 这就是为什么我制作了一个包含几个有用组件的库的原因。 “ RcIf”

  <RcIf if={condition} >
    <h1>I no longer miss ngif</h1>
  </RcIf>
  <RcIf if={othercondition} >
    <h1>I no longer miss v-if</h1>
    <RcElse>
      <h1>I love react</h1>
    </RcElse>
  </RcIf>

您可以从npm安装它

[https://www.npmjs.com/package/rc-if]

percho answered 2019-11-04T11:14:20Z
1 votes

我也来自有角度的背景,并且正在寻找一种简单的衬纸来显示变量是否包含任何元素的标签。 这为我工作:

<div className="comic_creators">
    {c.creators.available > 0 ? <h4>Creators</h4> : null }
    {c.creators.items.map((creator,key) =>
        <Creator creator={creator} key={key}></Creator>
    )}
</div>
Naguib Ihab answered 2019-11-04T11:14:46Z
0 votes

我是Tersus-jsx.macro的创建者,我认为该模块提供了此问题的确切条件。

除了将JSX表达式和ES6混合以实现ng-if或ng-repeat之外,该宏还允许执行与AngularJS for React JSX中相同的操作,例如 对于ng-if:

<div>
  <button
    tj-if={a === 0}
    id="gotoA"
    className="link"
    onClick={clicking}
  />
</div>

这相当于

<div>
  {(a === 0) && (
    <button
      id="gotoA"
      className="link"
      onClick={clicking}
    />
  )}
</div>

鉴于开箱即用的最新版本的create-react-app支持Babel-Macro,您所需要做的就是npm安装此模块,用“ tersus”包装渲染返回并开始分配这些道具。

您可以从以下位置安装:[https://www.npmjs.com/package/tersus-jsx.macro]

David Yu answered 2019-11-04T11:15:40Z
translate from https://stackoverflow.com:/questions/36771017/what-is-the-equivalent-to-ng-if-in-react-js