更新从变量渲染的反应元素的道具

Question

有一个反应组件存储在状态变量中。我附加了一个示例代码并创建了一个代码沙箱示例。如您所见，nameBadgeComponent应该显示状态{name}字段。它适用于默认值，但不会对变量name更改做出反应。有没有办法在不更新nameBadgeComponent本身的情况下使其工作？

const [name, setName] = useState("DefaultName");
const [nameBadgeComponent] = useState(<h2>My name is: {name}</h2>);
return (
<div className="App">
{nameBadgeComponent}
<button
onClick={() => {
const newName = Math.random()
.toString(36)
.substring(3);
console.log("Renamed to:", newName);
setName(newName);
}}
>
rename
</button>
</div>
);

Answer 1

不能从 useState 创建组件。状态是定义组件在什么条件/外观/等下的所有属性和数据。useState 允许控制一条信息或数据，但不响应更改，组件可以。

您在名称中输入"组件"的事实应该给您一个提示;)

你想做的可能是这个：

function NameBadgeComponent({ name }) {
return <h2>My name is: {name}</h2>;
}
export default function App() {
const [name, setName] = useState("DefaultName");
return (
<div className="App">
<NameBadgeComponent name={name} />
<button
onClick={() => {
const newName = Math.random()
.toString(36)
.substring(3);
console.log("Renamed to:", newName);
setName(newName);
}}
>
rename
</button>
</div>
);
}

这将正确更新到名称更改。

Answer 2

为什么要将 nameBadgeComponent 提取到状态？这是无用的，因为它只依赖于name，使您的代码尽可能接近原始代码：

const [name, setName] = useState("DefaultName");
const nameBadgeComponent = <h2>My name is: {name}</h2>;
return (
<div className="App">
{nameBadgeComponent}
<button
onClick={() => {
const newName = Math.random()
.toString(36)
.substring(3);
console.log("Renamed to:", newName);
setName(newName);
}}
>
rename
</button>
</div>
);
}

关于它不起作用的原因的上下文：如果你使用useState你定义开始状态，否则其中的代码永远不会再次运行，除非你使用setState(在本例中setNameBadgeComponent( 因此它从未更新

编辑： 定义额外组件的另一个答案是更反应的代码，如果你要接受一个答案，请接受那个答案。