[解決済み] react.jsでng-ifに相当するものは何ですか？

質問

私はangularからreactに移ってきたのですが、angularのng-ifディレクティブに代わる、reactの良い代替案を見つけようとしています。例えばこのようなコードです。私は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;

この解決策は有効ですが、この効果を得るために一般的に使われている別の方法があるのでしょうか？あくまで推測ですが

どのように解決するのですか？

どうですか？ 三項演算子 ?

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