在react.js中相当于ng-if的是什么？

Question

我将使用angular来做出反应,我正试图找出一个很好的反应替代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;

这个解决方案有效,但是还有另一种通常用于实现这种效果的方法吗？我只是在猜测

Answer 1

如何三元运算符？

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

Answer 2

我出于历史目的离开这里,请看下面的编辑,以便在反应开发了一段时间之后得到更好的解决方案 我最终创建了一个NgIf组件(这是反应原生但可能适用于反应)

码:

import React, {Component} from "react";

class NgIf extends Component {
  render() {
    if (this.props.show) {
      return (
        this.props.children
      );
    } else {
      return null
    }
  }
}

export default NgIf;

用法:

...
import NgIf from "./path/to/component"
...

class MyClass {
   render(){
      <NgIf show={this.props.show}><Text>This Gets Displayed</Text></NgIf>
   }
}

我是新手,所以可以改进,但帮助我从Angular过渡

编辑

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

感谢周杰伦的评论,一个好主意也是:

render() {
   <View>{this.props.value ? <Text>Yes</Text> : <Text>No</Text>}</View>
}

要么

render() {
   <View>{this.props.value && <Text>Yes</Text>}</View>
}

与其他一些答案类似但是内联工作,而不是使用整个渲染块/函数,不需要特殊组件,您可以使用带有三元运算符的else语句.if语句中包含的项目如果父对象不存在则不会抛出错误.即如果props.value不存在,则props.value.value2不会抛出错误.

请参阅此答案/sf/answers/1830644721/

编辑2:

根据上面的链接(/sf/answers/1830644721/)和经过开发反应应用程序的更多经验,以上方式它不是最好的做事方式.

反应中的条件操作员实际上很容易理解.有两种方法可以做到:

//Show if someItem
{someItem && displayThis}

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

你可能会遇到的一个警告是"someItem"不是布尔表达式.如果说0反应将打印0或反应原生将给你一个错误需要在文本元素中包装"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),因为它隐式地将结果转换为布尔表达式.

Answer 3

我只是想补充一点*ngIf，angular 不会实例化它所附加的组件。在 React 中，如果你在语句中使用 if 语句，return那么它仍然会实例化组件，即使它没有显示。要*ngIf在 React 中实现真正的类型行为，您必须创建一个变量来保存return语句之外的条件组件：

render() {

  const show = false

  return show
     ? <AwesomeComponent />   //still instantiated
     : null
}

render() {

  let c = null
  const show = false

  if (show) {
    c = <AwesomeComponent />   //not instantiated
  }
  return c
}

Answer 4

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

render() {
  return (
    <div>Stuff</div>
    {this.props.showMe && (
      <button type="submit" className="btn nav-btn-red">SIGN UP</button>
    )}
    <div>More stuff</div>
  );
}

Answer 5

好一点:

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

Answer 6

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

• 如果
• 转变
• IIFE（立即调用的函数表达式）

你可以在这里阅读这篇文章：Angular's ng-if Equivalent In a React Component

基本上，你想做这样的事情：

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;
  }
});

Answer 7

\n

false、null、undefined、 和true是有效的子项。他们只是不\xe2\x80\x99t\n 渲染。这些 JSX 表达式将全部呈现为相同的内容：

\n

\n\n

所以你可以尝试这个

\n\n

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

\n\n

这对于有条件地渲染 React 元素很有用。此 JSX 仅渲染 if 条件为 true \n并且仅当 someArray.length>0 时才会渲染

\n

Answer 8

我不喜欢代码中有很多三元运算符。这就是为什么我用几个有用的组件制作了一个库。“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