今日やるべきこと

CSラーニングマニュアルキーワードのクリア
詳細ページの作成
パブリックIP接続?

今日習ったこと

props(property)とは?

どこにでもありますが、どこにつながっているもの.親はどこかにいて、怖がらないで、支えが必要です.読解対象

専門道具とは何ですか。

、propsと呼ばれています.

親構成部品は、子構成部品に値を渡すために使用されます.(一方向データストリームがあります.)

の特徴は修正できないことです.△子供にとって、これは読み取り専用のデータです.

2.使い方？

Propertyに文字列を渡す場合は、二重引用符(""")を使用して、文字列外の値を角カッコ({})に渡します.

2つのアイテムを移動

App.js

import Main from './component/Main';

function App(){
	return(
		<div>
			<Main name="강형원" color="blue"/>
		<div>
	);
}

Main.js

import React from 'react';

function Main(props){
	return(
    	<div>
        	<main>
            	<h1 style={{color:props.color}}>안녕하세요. {props.name}입니다.</h1>
            </main>
        </div>
    );
}

4.プロパティのデフォルト値と必須値の設定

1)デフォルト設定

Main.js(名前属性がない場合は「Default」という値で処理)

import React from 'react';

function Main({name, color}){
	return(
    	<div>
        	<main>
            	<h1 style={{color}}>안녕하세요. {name} 입니다.</h1>
            </main>
        </div>
    );
 }
 
 Main.defaulProps = {
 	name: 'Default'
 }
 
 export default Main;

App.js

import React, {Component} from 'react';
import Header from './component/Header';
import Footer from './component/Footer';
import Main from './component/Main';

function App(){
	return (
   	<div>
       	<Header />
           	<Main color='blue'/>
           <Footer />
       </div>
   )
}

export default App;

6.props.子どもを生かす

childrenを使用して内部の内容を表現できます.
Wrapper.js

import React from 'react';
import Main from './Main';
 
 function Wrapper(props){
 	const style = {
    	backgroundColor: 'yellow',
    };
    
    return (
    	<div style={style} />
 	);
}

export default Wrapper;

-既存のMain構成部品をラップします.プライマリ構成部品は表示されません.
App.js

import React, {Component} from 'react';
import Header from './Header';
import Footer from './Footer';
import Main from './component/Main';
import Wrapper from './component/Wrapper';

function App() {
	return (
    	<div>
        	<Header />
            	<Wrapper>
                	<Main color='blue'/>
                </ Wrapper>
            <Footer />
        </div>
    );
}

export default App;

-Wrapper構成部品で、this.子供たちにレンダリングしてあげましょう

import React from 'react';

function Wrapper(props) {
	const style = {
    	backgroundColor: 'yellow',
    }
    
    return (
    	<div style={style}>
        	{props.children}
        </div>
    );
}

export default Wrapper;

-複数のサブアイテムを使用することもできます.
App.js

import React, { Component } from 'react';
import Header from './component/Header';
import Footer from './component/Footer';
import Main from './component/Main';
import Wrapper from './component/Wrapper';

function App() {
	return (
		<div>
		<Header />
		<Wrapper>
			<Main name="강형원" color="blue"/>
			<Main name="넘버원" color="black"/>
		</Wrapper>
		<Footer />
	</div>
	);
}

export default App;