TIL. React. <22.04.16>

10987 ワード
project React JavaScript TIL テキストリンク

今日やるべきこと


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;
    Mapのソート
    [28] React HOC vs HOF