ReactのJSXにおけるコンポーネントへの引数の渡し方

継ぎ足ししていく予定。

Propsで渡す

プロパティと子要素が必須でないなら、?を付けておく。

export const Text = (props:{content?:string, children?:React.ReactNode}) :JSX.Element => {
    return <div><span>{props.content}</span><p>{props.children}</p></div>
}

親コンポーネントではこんな感じ。

import Text from "./components/export"

function App() {
  return (
    <div className="App">
        <Text content= "TextコンポーネントにPropsで渡したいテキスト">
             <p>子要素</p>
　     </Text>
    </div>
  );
}

Propsには型を明示する

type TextContent = {
    content?: string,
    children?: React.ReactNode
}
export const Text = (props:TextContent):JSX.Element => {
    const {content, children} = props;
    return <div><span>！{content}</span><p>？{children}</p></div>
}

となると、型だけを定義したファイルが欲しいな。