在 React 中導出和導入 const

Question

我正在嘗試保存一個 const 值，以便可以在其他組件中使用它。 在這個例子中，我希望能夠從 Form.jsx 中保存const age以使用 {age} 在 App.js 中呈現。

我已經排除了用於縮短代碼的導入文件，但這是我的示例

表單.jsx

  function Form() {
  const [age, setAge] = React.useState(0);
  const handleChange = (event) => {
    setAge(event.target.value);
  };

  return (
    <div>
      <FormControl>
        <Select value={age} onChange={handleChange}>
          <MenuItem value={0}>None</MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </div>
  );
}

export default Form;

應用程序.js

function App() {

  
  return (
    <div>
      <Form />
      <p>{age}</p>
    </div>
  );
}

如果我選擇值為 20 的 menuItem，則 function 應用程序將呈現<p>20</p> 。 感謝您的任何建議。

Answer 1

您可以在<App />中執行此操作，但我認為在 state 中，讓父級成為“單一事實來源”是最佳實踐。

（更多閱讀和代碼： https://webomnizz.com/change-parent-component-state-from-child-using-hooks-in-react/ ）

function Form(props) {
    const handleChange = (event) => {
        // Here, we invoke the callback with the new value
        props.onChange(event.target.value);
    }
  return (
    <div>
      <FormControl>
        <Select value={props.age} onChange={handleChange}>
          <MenuItem value={0}>None</MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </div>
  );
}

export default Form;

function App() {
  const [age, setAge] = React.useState(0);
  const handleChange = (value) => {
    setAge(value);
  };

  return (
    <div>
      <Form age={age} onChange={handleChange}  />
      <p>{age}</p>
    </div>
  );
}

Answer 2

在這種情況下，我一眼就能看到兩個選項：

• 您可以將 state 提升一級

所以age將是App組件中的一個變量，您可以在每次修改Form組件時更新它。 像這樣的東西：

  function Form({age, setAge}) {
  return (
    <div>
      <FormControl>
        <Select value={age} onChange={(event) => setAge(event.target.value)}>
          <MenuItem value={0}>None</MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </div>
  );
}

export default Form;

function App() {

  const [age, setAge] = React.useState(0);
  
  return (
    <div>
      <Form age={age} setAge={setAge} />
      <p>{age}</p>
    </div>
  );
}

通過上述設置， App組件和Form組件中都可以使用age並且它們都將被同步。

• 您可以使用 state 庫（如redux ）創建全局存儲並使用它將age變量分發到應用程序中您想要的任何位置，而不僅僅是App組件。 但這對於上述情況來說太過分了，我不推薦它。

Answer 3

您不能以這種方式將數據從子組件傳遞到父組件，因為創建的變量不在App.js組件的 scope 中。 要將數據從子組件傳遞到父組件，請在父組件App.js中創建 state 變量，並將事件處理程序 function 傳遞給子組件。

應用程序.jsx

function App() {
  const [age, setAge] = React.useState(0)

  const handleChange = (event) => {
    setAge(event.target.value);
  };

  return (
    <div>
      <h2>Age:{age}</h2>
      <Form age={age} handleChange={handleChange}/>
    </div>
  );
}

表單.jsx

  function Form({age, handleChange}) {

  return (
    <div>
      <FormControl>
        <Select value={age} onChange={handleChange}>
          <MenuItem value={0}>None</MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </div>
  );
}

export default Form;

這是類似的工作示例：- https://codesandbox.io/s/keen-night-zfsig

Answer 4

感謝大家發布您的解決方案。 但正如我在帖子描述中提到的，我希望 {age} 用於其他組件，我的意思是每個組件。 假設我有const sumAge = ({age} + {age}) ，那么 sumAge 現在可以在其他組件中訪問了嗎？