reactjs - 与react.js中的ng-if等效的是什么？

Question

我正在使用 Angular 使用react，我正在尝试找出一个很好的 React 替代方案来替代 Angular 的 ng-if 指令，在该指令中我根据条件渲染或不渲染元素。以这段代码为例。顺便说一句，我正在使用 typescript (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

怎么样ternary operator ？

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 包装在 () 中轻松处理:

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