Props.children – 【React】

Props.children – 【React】

Propsにchildrenという変数みたいなものがあります。

呼び出し元のjsからコンポーネントにデータを渡します。

index.js

index.jsからProps.childrenを渡します。

hello worldという文字列をコンポーネントのタグで囲みます。

index.js

import { StrictMode } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <StrictMode>
    {/* <App /> */}
    <App>hello world</App>
  </StrictMode>
);
reportWebVitals();

子コンポーネント側で、コンポーネントのタグに囲まれた部分をprops.childrenで取得します。

App.jsx

import './App.css';

function App(props) {
  return (
    <div className="App">
      <p>{props.children}</p>
    </div>
  );
}

export default App;

hello worldが表示されます。

サンプル

コメント

株式会社CONFRAGE ITソリューション事業部をもっと見る

今すぐ購読し、続きを読んで、すべてのアーカイブにアクセスしましょう。

続きを読む

タイトルとURLをコピーしました