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

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;

猜你喜欢

转载自blog.csdn.net/qq_37942845/article/details/90212458
今日推荐