父组件向子组件传递对象
时间: 2023-08-28 09:22:32 浏览: 54
父组件向子组件传递对象的方式与传递数据类似,可以通过props来实现。在父组件中,可以将对象作为属性值传递给子组件。子组件可以通过props对象来接收父组件传递的对象。
下面是一个示例:
父组件代码:
```javascript
import React from 'react';
import ChildComponent from './ChildComponent';
class ParentComponent extends React.Component {
render() {
const obj = {
name: 'John',
age: 25,
gender: 'male'
};
return (
<div>
<ChildComponent obj={obj} />
</div>
);
}
}
export default ParentComponent;
```
子组件代码:
```javascript
import React from 'react';
class ChildComponent extends React.Component {
render() {
const { obj } = this.props;
*** <p>Age: {obj.age}</p>
<p>Gender: {obj.gender}</p>
</div>
);
}
}
export default ChildComponent;
```
在这个示例中,父组件通过在子组件标签上添加属性`obj`来传递对象。子组件通过`this.props.obj`来获取父组件传递的对象,并在渲染时显示对象的各个属性。
这样,父组件就成功地向子组件传递了对象。