带状态的其他组件重用变量

debugcn 发表于 Dev

用户名

我正在尝试msg在另一个组件中重用该变量，该组件的范围可能是声明它的组件。问题是变量使用状态，并且不能在范围之上声明为两个组件都可以访问。

在App试图使用该组件显示了这个错误组件：msg is not defined

解决此问题的最佳解决方法是什么？

import React, { useState } from "react";

const Test = () => {
  const [msg, setMsg] = useState(null);
  return (
    <>
      <p>state value from component: {msg}</p>
      <button onClick={() => setMsg("changed")}>change state</button>
    </>
  );
};

const App = () => {
  return (
    <div>
        {msg && ( // error here
          <p>show this</p>
        )}
      <p>some text</p>
      <Test />
    </div>
  );
};

export default App;

为了方便起见，这是一个堆栈闪电战：https ://stackblitz.com/edit/react-g16stb

感谢您的帮助

布扎托

您不能将变量传递给需要提升状态的父母或兄弟姐妹。找到一个共同的祖先来放置您的州并作为道具传下来。

您的代码应如下所示：

const Test = ({ msg,setMsg }) => {
  return (
    <>
      <p>state value from component: {msg}</p>
      <button onClick={() => setMsg("changed")}>change state</button>
    </>
  );
};

const App = () => {
  const [msg, setMsg] = useState(null);
  return (
    <div>
        {msg && (
          <p>show this</p>
        )}
      <p>some text</p>
      <Test  msg={msg} setMsg={setMsg} />
    </div>
  );
};

export default App;

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。