【アウトプット㉟】-React- ライフサイクルの活用

とらハックさんのYouTubeを参考にチャットボットアプリの作成を始めたので、こちらのアウトプットはそちら動画で学習した内容となります。

自動スクロール機能

チャットが更新されたときに、スクロールが自動で下まで移動する使用を実装する。

App.jsx
//最新のチャットが見えるよに、スクロール位置の頂点をスクロール領域の最下部に設定する
componentDidUpdate(prevProps, prevState, snapshot) {
    const scrollArea = document.getElementById('scroll-area');
    if (scrollArea) {
        scrollArea.scrollTop = scrollArea.scrollHeight;
    }
}

Chats.jsx
return (
    <List id={"scroll-area"}>
        //中略
    </List>    
)

ディレイ機能

app.jsx
//コンポーネントの初期化時

case (nextQuestionId === 'init'):
    setTimeout(() => this.displayNextQestion(nextQuestionId), 500);
    break;

外部サイトへの転送

正規表現の/^https:*/を使用して、nextQuestionIdの先頭文字列がhttps:～で始まるかどうかをチェックする

<a>タグを生成し、クリック処理をすることで転送させる

app.jsx
case (/^https:*/.test(nextQuestionId)):
        const a = document.createElement('a');
         a.href = nextQuestionId;
         a.target = '_blank';
         a.click();
         break;​