Reactノートコンポーネント-小道具と状態の使用（2）

コンポーネントで小道具を使用する方法

https://codesandbox.io/s/dawn-shape-bofqp?file=/src/index.js:488-492まず第一に、ここに完全なコードへのリンクがあります、あなたはそれを参照することができます。

index.js

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  return (
    <div className="App">
      父节点
      <Son />
    </div>
  );
}

class Son extends React.Component {
  constructor() {
    super();
    this.state = {
      n: 0
    };
  }
  add() {
    this.setState({ n: this.state.n + 1 });
  }
  render() {
    return (
      <div className="Son">
        子节点 n: {this.state.n}
        <button
          onClick={() => {
            this.add();
          }}
        >
          +1
        </button>
        <Grandson />
      </div>
    );
  }
}

const Grandson = () => {
  const [n, setN] = React.useState(0);
  return (
    <div className="Grandson">
      孙子 n:{n}
      <button onClick={() => setN(n + 1)}>+1</button>
    </div>
  );
};

const rootElement = document.querySelector("#root");
ReactDOM.render(<App />, rootElement);

上記のソースコードには、App、Son、Grandsonの3つのコンポーネントがあります。まず、3つのコンポーネントのコードを変更して、それらの間に値を渡します。

function App() {
  return (
    <div className="App">
      父节点
      <Son messageForSon="子节点你好" />
    </div>
  );
}

class Son extends React.Component {
  constructor() {
    super();
    this.state = {
      n: 0
    };
  }
  add() {
    this.setState({ n: this.state.n + 1 });
  }
  render() {
    return (
      <div className="Son">
        子节点 n: {this.state.n}
        <button
          onClick={() => {
            this.add();
          }}
        >
          +1
        </button>
        &nbsp;&nbsp;&nbsp;父节点给我的消息：{this.props.messageForSon}
        <Grandson messageForGrandson="孙节点你好" />
      </div>
    );
  }
}

const Grandson = (props) => {
  const [n, setN] = React.useState(0);
  return (
    <div className="Grandson">
      孙子 n:{n}
      <button onClick={() => setN(n + 1)}>+1</button>
      &nbsp;&nbsp;&nbsp;子节点给我的消息：{props.messageForGrandson}
    </div>
  );
};

<Son messageForSon="子节点你好" />この書き込みメソッドを使用して、appコンポーネントのSonコンポーネントにmessageForSonプロパティを渡していることがわかります。

Sonクラスコンポーネントでは、{this.props.messageForSon}親コンポーネントから渡された属性値を取得することにより、

Sonコンポーネントでは<Grandson messageForGrandson="孙节点你好" />、messageForGrandsonプロパティがGrandsonコンポーネントに渡されます。

Grandsonの関数コンポーネントで{props.messageForGrandson}は、親コンポーネントから渡されたプロパティ値が取得されます。

総括する

関数コンポーネントは、props.property名を使用して外部転送プロパティを取得します

クラスコンポーネントは、this.props。propertyコマンドを使用して外部転送プロパティを取得します