関数コンポーネントを利用して要素を追加する

基本

code:TypeScriptReact(tsx)

function Test(): JSX.Element {

return <div className="foo"></div>;

}

const root = createRoot(document.body);

root.render(<Test />);

Testという名前の関数を用意する

頭の文字は大文字にしないとエラーを吐くので注意

値を受け取れるようにする

code:TypeScriptReact(tsx)

function Test2(props: {text: string}): JSX.Element {

return <button>{props.text}</button>;

}

const root = createRoot(document.body);

root.render(<Test2 text="aaa" />);

propsを介してtextという値を渡すことにより、ボタンに表示する文字列を自由に設定できるようになっている

上記のソースコードではpropsの型を直接指定しているが、普通は予め定義しておいたものを使う

code:props.tsx

interface test2Props {

text: string

}

function Test2(props: test2Props): JSX.Element {

// 省略

}

参考