如何在反应中将变量的值共享给另一个组件？

Question

如何将变量传递给不同的组件？我在 VariableWithData 组件中有一个钩子，然后在单击按钮时乘以状态。如何将变量 multiplied 的数据传输到组件 NeedVariableData 以便我可以在 <h1> 标签上显示值？

//src/app.js

export const app = () => {
  return (
    <div>
      <VariableWithData />
      <NeedVariableData />
    </div>
  )
}

// src/components/VariableWithData.js

import { useState } from "react"

export const VariableWithData = () => {
  const [state, setState] = useState(2)

  function multiplyData(){
    const multiplied = state * 2;
  }
  return (
    <div>
      <input type="submit" onClick={multiplyData}/>
    </div>
  )
}

// src/components/NeedVariableData.js

export const NeedVariableData = () => {
  return (
    <div>
      <h1>{multiplyData}</h1>
    </div>
  )
}

Answer 1

你需要lift the state up.

import { useState } from "react"

export const App = () => {
  const [count, setCount] = useState(2);

  const handleClick = {
    setCount(c => c * 2);
  }

  return (
    <div>
      <VariableWithData onClick={handleClick} />
      <NeedVariableData multiplyData={count} />
    </div>
  )
}

// src/components/VariableWithData.js

export const VariableWithData = ({ onClick }) => {
  return (
    <div>
      <button onClick={onClick}/>
    </div>
  )
}

// src/components/NeedVariableData.js

export const NeedVariableData = ({ multiplyData }) => {
  return (
    <div>
      <h1>{multiplyData}</h1>
    </div>
  )
}

如何在反应中将变量的值共享给另一个组件？

How do I share the value of a variable to another component in react?

html

properties

jsx

reactjs

react-hooks