欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

初学react(二):组件与组件间的参数传递

程序员文章站 2022-03-11 16:29:49
...

a. 在src里新建Persion目录,并新建Persion.js 文件

Persion.js
//必须引入react,来识别JSX语法
import React from 'react';
//定义一个组件,并用形参接受父组件传过来的参数,可以自己定义
const person = ( props ) => {
    return (
        <div>
            <p>大家好,我系{props.name},我有{props.count}元宝</p>
            // .children 可以接受父元素传过来的插槽
            <p>{props.children}</p>
        </div>
        
    )
}
export default person;
//app.js
import React from 'react';
import './App.css';
import Persion from './Persion/Persion';
class App extends React.Component {
  render() {
    return (
      <div className="App">
        hello world
        <Persion name='渣渣辉' count='30'/>
        <Persion name='aaa' count='20'/>
        <Persion name='bbb' count='15'/>
        // 写在首位标签里,相当于插槽
        <Persion name='ccc' count='40'><a>非常感谢大家的支持</a></Persion>
      </div>
    );
  }
}
export default  App;
相关标签: reactjs