React笔记之组件-props和state的使用(2)

如何在组件中使用props

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，首先我们先改动一下三个组件的代码，在他们之间传递一个值，

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>
  );
};

可以看到我们在App组件里用<Son messageForSon="子节点你好" />这种写法向Son组件传递了一个 messageForSon 属性，

在Son这个类组件里通过{this.props.messageForSon}获取父组件传递的属性值，

在Son这个组件里又通过<Grandson messageForGrandson="孙节点你好" /> 向Grandson组件传递了一个 messageForGrandson 属性，

在Grandson这个函数组件里通过{props.messageForGrandson}获取父组件传递的属性值。

总结

函数组件使用 props.属性名 获取外部传递属性

类组件使用 this.props.属性命 获取外部传递属性