初学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;
下一篇: 初学react(三):state状态使用