要更新外部的 React 组件,您需要执行以下步骤:
以下是一个示例代码,演示如何更新外部的 React 组件:
import React, { useState } from 'react';
import ExternalComponent from 'external-component';
function ParentComponent() {
const [data, setData] = useState('Initial data');
const updateData = () => {
setData('Updated data');
};
return (
<div>
<button onClick={updateData}>Update External Component</button>
<ExternalComponent data={data} />
</div>
);
}
export default ParentComponent;
在上述代码中,我们创建了一个父组件 ParentComponent
,其中包含一个按钮和一个外部组件 ExternalComponent
。父组件使用 useState
钩子来管理数据,并将数据作为属性传递给外部组件。
当用户点击按钮时,updateData
函数会更新父组件的数据状态,从而触发父组件的重新渲染。由于外部组件接收的数据是父组件的属性,因此外部组件也会重新渲染,并显示更新后的数据。
领取专属 10元无门槛券
手把手带您无忧上云