React でユーザーの権限や役割によって Component を見せたり見せなかったりする

見なくても良いけど「強さ」とか this.state.userStrength をどこから取ってくるかとかはreact-router でアクセス制御 - Qiita の続き。

まず、ユーザーの強さを子 Component から見られるようにする。

App はアプリケーションの大本の Component 。

App.js

export default class App extends React.Component {
  static propTypes = {
    children: React.PropTypes.node,
  };
  static childContextTypes = {
    userStrength: React.PropTypes.string,
  }

  constructor(...args) {
    super(...args);

    this.state = {
      userStrength: 'tsuyoi',
    };
  }

  getChildContext() {
    return {
      userStrength: this.state.userStrength,
    };
  }

  render() {
    return this.props.children;
  }
}

childContextTypes と getChildContext を書く。

子 Component には contextTypes で親 Component で書いたやつを指定すると this.context.userStrength にアクセスできるようになる。
書かないとアクセスできない。

Authorization.js

export default class Authorization extends React.Component {
  static propTypes = {
    tsuyosa: React.PropTypes.arrayOf(React.PropTypes.string).isRequired,
    children: React.PropTypes.node,
  }

  static contextTypes = {
    userStrength: React.PropTypes.string,
  }

  render() {
    if (this.props.tsuyosa && !this.props.tsuyosa.includes(this.context.userStrength)) {
      return null;
    }
    if (React.isValidElement(this.props.children)) { return this.props.children; }
    return <span>{this.props.children}</span>;
  }
}

以下のように使う。

Page.js

export default class Page extends React.Component {
  render() {
    return (
      <ul>
        <li>誰でも見られる <Authorization tsuyosa={['hutsuu']}>と思いきや中級者以上が見られる</Authorization> 文字列</li>
        <Authorization tsuyosa={['tsuyoi']}>
          <li>上級者 以上が見られる文字列</li>
        </Authorization>
        <Authorization tsuyosa={['tsuyoi', 'hutsuu']}>
          <li>中級者 以上が見られる文字列</li>
        </Authorization>
        <Authorization tsuyosa={['tsuyoi', 'hutsuu', 'yowai']}>
          <li>初級者 以上が見られる文字列</li>
        </Authorization>
      </ul>
    );
  }
}

以上。

微妙ポイントとしては、 number, string, array が来ると <span> で囲まないと表示できなくなる。
<span> で囲まなくても良くなる方法あったら教えて欲しい🙏