时间戳

首页 > 解决方案 > 更新从变量渲染的反应元素的道具

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

问题描述

状态变量中存储了一个反应组件。我附上了一个示例代码并创建了一个代码框示例。如您所见，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>
  );

标签： reactjs

解决方案

您不能从 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>
  );
}

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

推荐阅读