,可以通过以下步骤实现:
import React, { useState } from 'react';
function ParentComponent() {
const [buttonInfo, setButtonInfo] = useState([]);
// 其他代码...
return (
<div>
{/* 显示按钮信息 */}
{buttonInfo.map((info, index) => (
<button key={index}>{info}</button>
))}
</div>
);
}
export default ParentComponent;
function ParentComponent() {
const [buttonInfo, setButtonInfo] = useState([]);
// 更新按钮信息
const updateButtonInfo = (info) => {
setButtonInfo([...buttonInfo, info]);
};
// 其他代码...
return (
<div>
{/* 显示按钮信息 */}
{buttonInfo.map((info, index) => (
<button key={index}>{info}</button>
))}
</div>
);
}
function ParentComponent() {
const [buttonInfo, setButtonInfo] = useState([]);
// 更新按钮信息
const updateButtonInfo = (info) => {
setButtonInfo([...buttonInfo, info]);
};
// 其他代码...
return (
<div>
{/* 渲染子组件,并传递更新按钮信息的函数 */}
<ChildComponent updateButtonInfo={updateButtonInfo} />
{/* 显示按钮信息 */}
{buttonInfo.map((info, index) => (
<button key={index}>{info}</button>
))}
</div>
);
}
function ChildComponent({ updateButtonInfo }) {
// 其他代码...
const handleButtonClick = () => {
const buttonInfo = '按钮信息';
updateButtonInfo(buttonInfo);
};
return (
<button onClick={handleButtonClick}>点击按钮</button>
);
}
通过以上步骤,就可以在父组件中显示按钮信息,并在子组件中更新按钮信息。
领取专属 10元无门槛券
手把手带您无忧上云