Open3
React
m_03JSXで何も返却したくないとき
条件分岐などでモジュールから何も返却したくないときはnullを返してあげる。
if (iWantToReturnNothing) {
return null;
}
return <li className="item">{name}</li>;
m_03forwardRef
- Reactではデフォルトでコンポーネント内部のDOMを公開していないため、forwardRefを使用してコンポーネントに対してrefを渡すことで、そのコンポーネントのDOMを操作したい場合に使用する。
- なお、公式としては必要な時以外には使わないことを推奨している。勝手にアクセスできてしまうとコードが壊れやすくなるため。
const MyInput = forwardRef<HTMLDivElement, PropType>((props, ref) => {
return <input {...props} ref={ref} />;
});
dangerouslySetInnerHTML
- reactの固有属性。通常のhtmlで言うとこのinnerHTML。
- JSXに文字列形式のhtmlを入力するとエスケープされてそのまま文字列として表示されてしまう。
- そのため、文字列形式のhtmlをhtmlとして出力したい場合に使用する。
XSSに注意
- 例えば掲示板サイトなどで、投稿文に悪意のあるコードを仕込まれた場合、その悪意のあるコードを含んだ投稿文がエスケープされることなくdangerouslySetInnnerHTMLにセットされ、他のユーザーに見える状態になってしまうため注意が必要。
- フォームの入力はエスケープしよう。