【二】通过props进行传值，子页面多种方式接收

image.png

先看效果图

image.png

使用常用的三种方式接收父页面传递过来的数据

Props.js

// import React, { Component } from 'react';
// 方式一：接收父页面传递的数据
// export default class Props extends Component {
//   render() {
//     return <div>{this.props.title}</div>;
//   }
// }
import React from 'react';
//方式二：接收父页面传递的数据
// export default function Props(props) {
//   return <div>{props.title}</div>;
// }

// 方式三：接收参数的解构
export default function Props({ title }) {
  return <div>{title}</div>;
}

App.js

import React, { Component } from 'react';
import Props from './Props';
export default class App extends Component {
  render() {
    return (
      <div>
        <Props title="这是一个字符串"></Props>
      </div>
    );
  }
}

本次就分享到这里，喜欢的请关注支持下，后期会带来更多丰富的内容