Closed2022/12/12にクローズ5

ft_transendenceメイン非公開記事: React v.17とv.18の差異

Chapter 10 [Reactとにかく書き始める: 実践編2💻]

関数の型宣言を使って、Reactの関数コンポーネントであるということを明確化することで、childrenや他の既存のプロパティを使うことができるようになる

TODO:
Reactの関数コンポーネントということを明示することで、Reactのコンポーネントのプロパティを使えるようにする

components/StyledMessage.tsx

-function StyledMessage(props: MessageProps) {
+const StyledMessage = (props: MessageProps) => {
	...
-}
+};

React.FC<propsのインターフェース名>と型注釈を加えることで、関数がReactのコンポーネントとして認識され、childrenなどのプロパティーを有効化できる
React.FC<propsのインターフェース名>はReact.FunctionComponent<propsのインターフェース名>の省略形である(どちらを使用しても同じ）

components/StyledMessage.tsx

-const StyledMessage = (props: MessageProps) => {
+const StyledMessage: React.FC<MessageProps> = (props) => {

index.tsx

ReactDOM.render(<App />, document.getElementById('root'));

index.tsx

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

このスクラップは2022/12/12にクローズされました