反应注解

1 年 ago

逸, 科

4 minutes

章节目录

路由

1. 命令

# create-react-appをインストール
$ npm install -g create-react-app

# 新規作成
$ npx create-react-app [プロジェクト名]

# TSX(JSXのTypeScript版)で作りたい時
# --template typescriptをつける
$ npx create-react-app --template typescript [プロジェクト名]

# 開発サーバー起動
$ npm start

# ビルドしてHTML/CSS/JSファイルを生成
$ npm run build

JSX是一种用于编写React组件的语法。

{変数名} の形式で埋め込むことができる

index.js（首先被调用的文件）

//React関連のライブラリをインポート
import React from 'react';
import ReactDOM from 'react-dom';

//アプリ固有のファイルをインポート
import './index.css';
import App from './App';

//キャッシュのためのサービスをインポート
import reportWebVitals from './reportWebVitals';

//Appコンポーネントを実行
//render(comp, target)
//comp: 出力するコンポーネント
//target: 出力先の要素
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

//サービスを有効化
registerServiceWorker();

组件文件

//Reactの基本ライブラリをインポート
import React, { Component } from 'react';

//ロゴ画像/スタイルシートをインポート
import logo from './log.svg';
import './App.css';

//Appコンポーネントを定義
class App extends Component {

  //描画内容を準備
  render() {
    return (
      //class → classNameにすること
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
          Learn React
          </a>
        </header>
      </div>
    );
  }
}

//Appクラスをエクスポート
export default App;

React.Fragment（dummy element）

//React.Fragmentは最終的な出力には含まれない
ReactDOM.render(
  <React.Fragment>
    <p>あいうえお</p>
    <p>かきくけこ</p>
  </React.Fragment>
  , document.getElementById('root');
);

设定属性

//属性値前後のクォートは付けない
//href="{url}"だとダメ
const url = 'https://wings.msn.to/';
<a href={url}>Webサイト</a>

//style属性の指定にはオブジェクトを利用する
//オブジェクトリテラルではcamelCase記法に直す
const style = { color: 'Red', backgroundColor: 'Yellow' };
<p style={style}>あいうえお</p>

//属性をまとめて設定
//オブジェクトリテラルと「...」演算子を利用する
const attrs = {
  src: 'http://test/image/aiueo.jpg',
  alt: 'あいうえお',
  title: 'テストあいうえお'
};
<img {...attrs} />

将组件嵌套

import React, { Component } from 'react';
//子コンポーネントをインポート
import MyCover from './MyCover';

export default class MyBook extends Component {
  render() {
    return (
      <div>
        {/* MyCoverコンポーネントを呼び出し */}
        <MyCover title={this.props.info.title} />
      </div>
    )
  }
}

3. 道具

props是什么意思？

在组件中将对象作为单一对象传递给该组件。
可以在JSX内传递属性信息和子元素。

//コンポーネント側
import React, { Component } from 'react';

export default class MyHello extends Component {
  //プロパティを元に出力を生成
  render(){
    return <div>こんにちは、{this.props.name}さん</div>;
  }
}

//index.js
import MyHello from './MyHello';
...
ReactDOM.render(
  //MyHelloコンポーネントにプロパティを引き渡す
  //この場合は「name」を渡す
  <MyHello name="鈴木" />,
  document.getElementById('root');
);

「…」演算子を使用することで、オブジェクトの内容を個々の属性にばらすことも可能。

const data = {
  name: '鈴木',
  age: 18,
  sex: '男'
};

ReactDOM.render(
  <MyClass {...data} />,
  document.getElementById('root')
);

4. 条件判断和循环处理

条件分支

「?:」运算符，「&&」运算符

「&&」演算子は、trueの時だけ出力される

//「?:」演算子
{ this.props.isNew ? <MyNew /> : null }

//「&&」演算子
{ this.props.isNew && <MyNew /> }

立即执行函数

//関数を使う
//見栄えが悪くなるので、なるべく先に名前付きで関数を作って、それを利用するようにする
{(() => {
  if(this.props.isNew){
    return <MyNew />
  }
})()}

迭代处理

利用Array的map方法

const data = [
  { name: '鈴木', age: 18, sex: '男', userid=1 },
  { name: '佐藤', age: 20, sex: '女', userid=2 },
};

//index.js
ReactDOM.render(
  //配列dataを使っての繰り返し処理
  <div>
    {data.map((x) => 
      <MyClass {...x} />)}
  </div>
)

//keyプロパティを持たないことによる警告対処のため
//以下のようにkey属性を持つことを推奨
//主キーを持たない場合はkey={index}とするのもOK
//<MyClass {...x} key={x.userid} />

5. 状态和事件处理

“State是什么意思？”

stateの値を更新する場合は、setStateを使用する

export default class MyState extends Component {

  constructor(props) {
    super(props);

    //Stateの初期値を設定
    this.state = {
      current: new Date()
    }
  }

  //1000ミリ秒おきにStateを更新
  //setStateを使用する
  setInterval(() => {
    this.setState({
      current: new Date()
    });
  }, 1000)

  render() {
    //currentの値をページに反映
    <div>{this.state.current.toLocaleString()}</div>
  }
}

事件处理

this.関数名.bindでイベント実行時の関数を指定(bindを付けないとエラーになる)

//onchangeイベントを起こす
<input id="txtName" type="text" onChange={this.show.bind(this)} />

//アロー関数で指定する場合
<input id="txtName" type="text" onChange={(e) => this.show(e)}

//引数を渡す場合
show(end, e) {
  console.log(`${e.target.value}${end}`);
}
...
//元々のイベントオブジェクトは、引数リストの末尾に渡される
//end => 'さん'
//e => this
//がそれぞれわたされる
<input id="txtName" type="text" onChange={this.show.bind(this, 'さん')} />

生命周期方法

待会儿写

6. 路由

ルーティング機能用のライブラリとしてReact Routerがある

# React Routerをインストール
$ npm install --save react-router-dom

路由示例

で括っているのは、最初に合致した要素だけ出力する、という意味
exact属性は、完全一致で判定するという意味

ルーティング経由でのページ遷移は、で定義する

import React, { Component } from 'react';

//ルーティング関連の機能をインポート
import { BrowserRouter as Router, Link, Route, Switch } from 'react-router-dom';

//ルーティングで利用するコンポーネントをインポート
import MyTop from './MyTop';
import MyHello from './MyHello';
import MyArticle from './MyArticle';

export default class App extends Component {
  render() {
    //Router(BrowserRouter)でルーティング機能を有効化
    return(
      <Router>
        <div>
          {/* ルーティング経由のリンクリストを準備 */}
          <ul>
            <li><Link to="/">トップ</Link></li>
            <li><Link to="/hello">Hello</Link></li>
            <li><Link to="/article">公開記事</Link></li>
          </ul>
          <hr />

          {/* ルーティング設定(条件にマッチしたコンポーネントを出力) */}
          <Switch>
            <Route exact path="/" component={MyTop} />
            <Route　path="/hello"　component={MyHello}/>
            <Route path="/article" component={MyArticle}/>
          </Switch>
        </div>
     </Router>
    )
  }
}

根参数

  //リンク
  <Link to="/article/13">記事13</Link>

  //ルートパラメーターを含んだルート
  <Route path="/article/:id" component={MyArticle} />

  //コンポーネント側でルートパラメータを受け取る
  //this.props.match.params.名前で受け取ることが可能
  const id = this.props.match.params.id;

補充

にてpathを書かない場合、全てのURLにマッチする、という書き方ができる