Props – 【React】

Props – 【React】

Propsをコンポーネントに渡すことができます。

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

index.js

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

titleとcolorを追加してコンポーネントにPropsを渡します。

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 title="hello world" color="blue" />
  </StrictMode>
);
reportWebVitals();

コンポーネント側でprops変数から渡ってきたデータを受け取ります。

App.jsx

import './App.css';

function App(props) {
  const {title, color} = props; // デストラクチャリング
  return (
    <div className="App">
      <p style={{color}}>{title}</p>
    </div>
  );
}

export default App;

hello worldが青字で表示されます。

サンプル

高橋

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