React を学ぶ(1)

1. React ルーティングが this.props.history.push にジャンプしてジャンプします

パラメータ: pathname: "/XXX" ジャンプパス

パラメータ: state{id:XXX,title:XXX} ルーティングパラメータ

<button onClick={() => {
                    this.props.history.push({
                        pathname: '/Login', //要跳转到的路径
                        state: {  //参数地址栏不显示，刷新地址栏，参数不丢失
                            id: 456
                        }
                    })
                }}>去详情页</button>

ページにジャンプしてパラメータを受け取ります

componentDidMount() {
        console.log(this.props.history.location.state);
    }

2. jsx の動的レンダリング要素

jsx では、JS 式のみを記述できますが、ステートメント本体 (if、for... など) は記述できません。

const data = ["161", "156sdfs", "fsaf"]
class Home extends Component { //创建一个 ClickMe的类，继承与Component 【注】组件名首字母必须大写
    render() { //react里的一个生命周期，用于渲染dom
        return ( //return 里写的是jsx代码，和html基本一致
            <div>
                <h1>16516</h1>
                <ul>
                    {
                        data.map((item, index) => {
                            return <li key={index}>{item}</li>
                        })
                    }
                </ul>
            </div>
        )
    }

}

3. JSX で定義された関数コンポーネントの最初の文字は大文字にする必要があります。そうしないと、ブラウザが自動的にそれを HTML タグに解析します。

関数コンポーネントの this は、ウィンドウについて考えるだけでなく、未定義を指します。これは、jsx が変換後にコードを自動的に strict モードに変換するためです。

厳密モードでは、関数はウィンドウをポイントしてはなりません

function Demo(){
            return <h2>渲染函数组件</h2>
        }

コンポーネントを使用する

<デモ/>

3.1 関数コンポーネントの値の受け渡し

<Demo name="165516"/>

function Demo(props){
   console.log(props);
   return <h2>{props.name}</h2>
}

4. クラス型コンポーネント props で値を受け取り、定義されたクラスを React のコンポーネントクラスにリダイレクトしてクラスをエクスポートします

import React, { Component } from 'react';
class Dome1 extends Component {
    render () {
        console.log(this.props);
        return (
            <h1>{this.props.name}</h1>
        )
    }
}
export default Dome1;

現在のコンポーネントを使用するには

import React, { Component } from 'react'; //引入react 首字母必须大写
import Dome1 from "./components/dome1/index"

class Login extends Component {
    
    render() { //react里的一个生命周期，用于渲染dom
        return ( //return 里写的是jsx代码，和html基本一致
            <div>
                <Dome1 name="51616"/>
            </div>
        )
    }

}
export default Login;

4.1 クラスコンポーネントの状態は、vue の data() メソッドと同様に、状態を保存するために使用されます。

クラスの状態値を直接変更することはできません。リアルタイムの変更を実現するには、インスタンスの setState() メソッドを呼び出す必要があります。

import React, { Component } from 'react';
class Dome1 extends Component {
    constructor(props) {
        super(props)
    }
    state = {
        isHor: false
    }
    render() {
        const { isHor } = this.state

        return (
            <div>
                <h1>{this.props.name}</h1>
                <h2>今天天气很炎热{isHor ? "炎热" : "凉爽"}</h2>
                <button onClick={this.dome}>切换</button>
            </div>
        )
    }
    dome = () => {
        console.log(this);
        const a = !this.state.isHor
        this.setState({ isHor: a })
    }

}
export default Dome1;