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が表示されます。

サンプル

高橋

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^