在React中,将道具从子组件传递到父组件中的map()可以通过以下步骤实现:
下面是一个示例代码:
// 父组件
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';
const ParentComponent = () => {
const [propsFromChild, setPropsFromChild] = useState([]);
const handlePropsFromChild = (props) => {
setPropsFromChild([...propsFromChild, props]);
};
return (
<div>
{propsFromChild.map((props, index) => (
<p key={index}>{props}</p>
))}
<ChildComponent onPropsFromChild={handlePropsFromChild} />
</div>
);
};
export default ParentComponent;
// 子组件
import React from 'react';
const ChildComponent = ({ onPropsFromChild }) => {
const propsToParent = '道具内容';
const handleClick = () => {
onPropsFromChild(propsToParent);
};
return (
<button onClick={handleClick}>传递道具给父组件</button>
);
};
export default ChildComponent;
在上面的示例中,父组件通过useState创建了一个状态propsFromChild,用于存储从子组件传递过来的道具。父组件还定义了一个函数handlePropsFromChild,用于接收子组件传递的道具,并将其添加到状态propsFromChild中。这个函数通过道具onPropsFromChild传递给子组件。
子组件中,通过调用父组件传递的函数onPropsFromChild,将道具propsToParent传递给父组件。当点击按钮时,会触发handleClick函数,将道具传递给父组件。
在父组件中,使用map()函数遍历propsFromChild状态,将每个道具显示在页面上。
这样,就实现了将道具从子组件传递到父组件中的map()。
领取专属 10元无门槛券
手把手带您无忧上云