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;

此解决方案有效，但是否有另一种通常用于实现此效果的方法？我只是猜测

原文由 ceckenrode 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

三元运算符 呢？

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

您也可以使用 && ：

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

注释中的大块可以通过将 JSX 包装在 () s 中来轻松处理：

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

也内联：

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

原文由 Yuya 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

出于历史目的，我将其保留在这里，请在下面查看我的编辑以获得更好的解决方案，因为我在 React 中开发了一段时间后最终创建了一个 NgIf 组件（这是 React Native 但可能适用于 React）

代码：

 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 不会抛出错误。

请参阅此答案 https://stackoverflow.com/a/26152067

编辑 2：

根据上面的链接 ( https://stackoverflow.com/a/26152067 ) 并且在开发 React 应用程序的更多经验之后，上面的方法并不是最好的做事方式。

React 中的条件运算符实际上很容易理解。有两种方法可以做事：

 //Show if someItem
{someItem && displayThis}

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

您可能会遇到的一个警告是“someItem”是否不是布尔表达式。如果说 0 react 将打印 0 或者 react 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 发布，翻译遵循 CC BY-SA 3.0 许可协议