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.属性命 获取外部传递属性