《React 外部数据props的写法》

它类似于Vue 里的props

分为函数组件和类组件

类组件 this.props.xxx

一个父组件想给一个类组件传数据，

//父组件
function App() {
  return (
    <div className="App">
      爸爸
      <Son messageForSon="儿子你好" />
    </div>
  );
}

传的时候，使用赋值的语句，messageForSon是这个属性的名字，后边的值。

只能传两种形式：要么是用""包起来的字符串常量，表示传一个字符串。要么是用{}包起来的JS表达式，表示传一个JS变量。不能混着用。

传变量：<Son messageForSon={1+1} /> 就是2；或者{a}，把自己的数据a传进去

类组件直接使用this.props接收数据

class Son extends React.Component {
  render() {
    return (
      <div className="Son">
        我是儿子，我爸对我说「{this.props.messageForSon}」
        <Grandson messageForGrandson="孙贼你好" />
      </div>
    );
  }
}

函数组件 props.xxx

给函数组件传数据，还是一样的规则。要么是用""包起来的字符串常量，表示传一个字符串。要么是用{}包起来的JS表达式，表示传一个JS变量。不能混着用。

函数组件接收数据，要在函数的第一个形参传一个props，是一个对象。React会自动把外边传进来的数据变成key:value的对象形式。如{messageForGrandson:"孙贼你好"} 使用的时候，就用对象.属性名的方式使用，props.

const Grandson = (props) => {
  return (
    <div className="Grandson">
      我是孙子，我爸对我说「{props.messageForGrandson}」
    </div>
  );
};

props是不能写的