父组件传参数到子组件
时间: 2023-09-16 18:15:08 浏览: 36
父组件传递参数到子组件可以通过props实现。在父组件的模板中,通过向子组件标签中添加属性来传递参数。子组件则可以通过this.props来获取传递过来的参数。
下面是一个示例:
父组件:
```jsx
import React from 'react';
import ChildComponent from './ChildComponent';
class ParentComponent extends React.Component {
render() {
const name = 'John';
return (
<div>
<ChildComponent name={name} />
</div>
);
}
}
export default ParentComponent;
```
子组件:
```jsx
import React from 'react';
class ChildComponent extends React.Component {
render() {
return (
<div>
<p>Hello, {this.props.name}!</p>
</div>
);
}
}
export default ChildComponent;
```
在上面的例子中,父组件传递了一个名为"name"的参数给子组件。子组件通过this.props.name来获取该参数的值,并在渲染时显示在页面上。在这个例子中,子组件将显示"Hello, John!"。