反応学習ノート1

38660 ワード
React js テキストリンク
Reactを学び必要な知識を整理する学習ノート

📌 React Router


デフォルトではReact Routerを使用します
terminal : npm install react-router-dom
import : import {Route} from "react-router-dom"
の必須タスクです.
<Route exact path="/" component = {Home} />
<Route path="/about" component = {About} />

👀 Route Component

  • パスをpath値に設定します.
  • 表示するページはコンポーネント値を使用します.
  • exact:設定されたコンポーネントを表示するには、指定されたパスと完全に一致する必要があります.
    • もし正確でなければ?
  • /about中にも/が含まれているので、両方とも見られます.

    • 👀 Route Parameter

  • ルーティングに特定の値を置く方法.
  • ・history:この対象によりpushreplacelocation他の経路に移動したり、前後ページに切り替えたりできます.
  • match:このオブジェクトには現在のパスの情報があり、URL照会情報もあります.
  • ・/about/:name:このオブジェクトには、どのルートにマッチするかに関する情報と、params(match.params.nameフォーマット)情報が含まれます.
    • 📌 Parmas
    💻 App.js

<Route exact path ="/" component={Home} />
<Route path = "/about" component={About} />
<Route path = "/about/:name" component={About} />
//URL의 params를 설정 할 때에는 :name의 형식으로 설정.

💻 About.js
const About = ({match}) =>{
  return (
    <div>
    	<h2> About {match.params.name} </h2>
	</div>
	);
};
  • name params、この値はexactで確認できます.

    • ・67917・About素子のリピート❗・67918・
  • この場合は使用可能Switchでも使用可能/about素子で解決.
  • スイッチ:一致する最初のルートのみを表示し、残りのルートは表示しない.
    • <Route exact path = "/" component = {Home} />
<Switch>
  <Route path = "/about/:name" component={About} />
  <Route path = "/about" component = {About} />
</Switch>
    🧨 注:まず、比較するルーティングを作成します./about/:name加<a href ...>foo</a>以上であれば、入力nameも表示されません.

    👀 Link Component


    ・𐥍7・アプリケーション内で他のルーティングに移動した場合、・𐥊4・形式❌.この方法を使用すると、リフレッシュが発生します.
  • リンク・コンポーネントは、ページのリフレッシュを防止し、必要なパスに画面を切り替えることができます.
    • 💻Navigation.js

import React from 'react';
import {Link} from 'react-router-dom' ;

const Navigation = () => {
  return(
    <div>
    	<ul>
    		<li><Link to ="/">Home</Link></li>
    		<li><Link to ="/about">About</Link></li>
    		<li><Link to ="/about/foo">About Foo</Link></li>
    	</ul>
    </div>
    );
};

    📌 onCreate()

  • 親->子ども支援データ伝達.
  • 今回は子供->親データを渡すコードです.
    • 💻 App.js (부모 컴포넌트)

import PhoneForm from './components/PhoneForm';
import React,{Component} from 'react';

class App extends Component {
  handleCreate = (data) =>{
    console.log(data);
  }
  render() {
    return (
      <div> 
        <PhoneForm
          onCreate={this.handleCreate}/>
      </div>
    );
  }
}

export default App;
    💻 PhoneForm.js(자식 컴포넌트)

import React, {Component} from'react';

class PhoneForm extends Component {
    state ={
        name:'',
        phone:''
    }
    handleChange = (e) =>{
        this.setState({
            [e.target.name]:e.target.value
        });
    }
    handleSubmit = (e) =>{
        e.preventDefault();
        this.props.onCreate(this.state);
        this.setState({
            naje:'',
            phone:''
        })
    }
    render(){
        return(
            <form onSubmit={this.handleSubmit}>
                <input
                    placeholder="이름"
                    value={this.state.name}
                    onChange={this.handleChange}
                    name="name"
                />
                <input
                    placeholder="전화번호"
                    value={this.state.phone}
                    onChange={this.handleChange}
                    name="phone"
                />
                <button type="submit">등록</button>
            </form>
        )
    }
}

export default PhoneForm;
  • onCreate()関数でメソッドを定義します.
  • サブエレメントからpropsを呼び出すonCreate()関数によりステータス値を親エレメントに渡す.
  • [e.target.name]文法に詳しい!!

    • 📌 反応案を処理する。


    👀 データの追加

    💻 App.js

import PhoneForm from './components/PhoneForm';
import React,{Component} from 'react';

class App extends Component {
  id = 2
  state = {
    information :[
      {
        id: 0,
        name: '김민준',
        phone: '010-0000-0000'
      },
      {
        id:1,
        name:'홍길동',
        phone: '010-0000-0001'
      }
    ]
  }
  handleCreate = (data) =>{
    const {information} = this.state;
    this.setState({
      information: information.concat({id:this.id++, ...data})
    })
    console.log(data);
  }
  render() {
    const {information} = this.state;
    return (
      <div> 
        <PhoneForm
          onCreate={this.handleCreate}/>
          {JSON.stringify(information)}
      </div>
    );
  }
}

export default App;
  • PhoneFormから受信したデータを情報オブジェクトに入れる.
  • idは、植壁オブジェクトに使用される.
  • this.id++なので、idは2から始まります.
    • 使用
  • concat.

    • 👀 map関数。

    
const a = [1,2,3,4,5];
const b = a.map(number => number * 2);
    💻 PhonInfo.js

import React, { Component } from 'react';

class PhoneInfo extends Component {
    static defaultProps = {
        info: {
            name: '이름',
            phone: '010-0000-0000',
            id: 0
        }
    }
    render(){
        const style ={
            border: '1px solid black',
            padding : '8px',
            margin : '8px'
        };
        const {
            name, phone, id
        } = this.props.info;

        return (
            <div style={style}>
                <div><b>{name}</b></div>
                <div>{phone}</div>
            </div>
        )
    }
}

export default PhoneInfo;
  • PhoneInfoListで受信したデータを指定形式のものに飾る
    • 💻 PhoneInfoList.js

import React, {Component} from 'react';
import PhoneInfo from './PhoneInfo';

class PhoneInfoList extends Component {
    static defaultProps ={
        data:[]
    }
    render(){
        const {data} = this.props;
        const list = data.map(
            info => (<PhoneInfo key={info.id} info={info} />)
        );
        return (
            <div>
                {list}
            </div>
        )
    }
}

export default PhoneInfoList;
  • App.jsから受信したデータはname,phone,idからなるinfoオブジェクトである.
  • 受け取ったオブジェクトをPhonInfoコンポーネントに送信し、指定したスタイルに変換して入れるconst list
    • 💻 App.js

import React,{Component} from 'react';
import PhoneForm from './components/PhoneForm';
import PhoneInfoList from './components/PhoneInfoList';

class App extends Component {
  id = 2
  state = {
    information :[
      {
        id: 0,
        name: '김민준',
        phone: '010-0000-0000'
      },
      {
        id:1,
        name:'홍길동',
        phone: '010-0000-0001'
      }
    ]
  }
  handleCreate = (data) =>{
    const {information} = this.state;
    this.setState({
      information: information.concat({id:this.id++, ...data})
    })
  }
  render() {
    return (
      <div> 
        <PhoneForm
          onCreate={this.handleCreate}/>
          <PhoneInfoList data ={this.state.information} />
      </div>
    );
  }
}

export default App;
  • PhoneFormサブアセンブリは受信したデータを自分の状態に入れる.
  • 自分のstateをpropsとしてPhonInfoListに送信する.
    • <ソース:Veloopert.com>
    2つのbyte[]配列が結合され、1つのbyte[]が切り取られます.
    Angular CLIコレクション