宣言的にJSXを書く

この切り替わる部分

https://gyazo.com/aec28cbecc6743ac75b40fa8ef5bf5c0

code:JSX(js)

<div className='help-block'>

<JP>個人、家族、趣味のグループ、NPO、大学での授業・研究室・サークル、フリーランス、登記前の組織、企業の主催によらないイベント等で利用します。</JP>

<EN>For individuals, families, interest groups, NPOs, classes, labs, or clubs at universities, freelancers, startups pre-incorporation, and events not hosted by a company. </EN>

<ShowMoreText>

<JP>公立および私立の小中高大学は同じ扱いです。仕事でも一人で利用する場合はこちらです。</JP>

<EN>Includes not-for-profit public or private schools and solo professionals. </EN>

</ShowMoreText>

</div>

言語ファイル

Reactに埋め込むメッセージを、言語毎のファイル（yaml等）に書くやつ

メッセージ毎に固有のIDがあって、ReactからはIDで参照して埋め込む

どれがどれに対応しているのか読みづらい

Reactと、ブラウザと、言語ファイルの3つを見比べてコーディングする必要がある

メンテナンスがめんどくさい

不要になったメッセージが言語ファイル内に残ったり

実装

code:js

const JP = ({children}) => user.lang === 'jp' ? children : null

もっとやる

When

<When screen_xs>小さい画面</When>

条件判定して中身を表示する

<When screen_xs>小さい画面</When>

or

<When screen_md or screen_lg>中画面と大画面で表示するコンテンツ</When>

and

<When admin_user and enable_google_analytics>管理者専用Google analytics設定画面</When>

code:js

import {When} from 'react-display-switch'

When.case('screen_xs', () => window.innerWidth < 768)

When.case('screen_md', () => !When.case('screen_xs') && window.innerWidth < 992)

When.case('screen_lg', () => window.innerWidth >= 992)

When.case('admin_user', () => user.admin === true)

When.case('enable_google_analytics', () => process.env.ENABLE_GOOGLE_ANALYTICS)

実装

こういうJSXを書くと

<When screen_md or screen_lg>

このコンポーネントの

const When = (props) => { }

propsにはこういうobjectが渡る

code:js

{

screen_md: true,

or: true,

screen_lg: true

}

おわり