从组件获取状态并将其显示为 div 中的值属性？

Question

在功能组件中
我想与几个组件共享一个功能，以防止重复代码。我需要的只是函数变化的state

是否可以将 state 从 UpdateNum.jsx 组件获取到其他组件（如我在代码中所示）？
或者，是否可以将此功能传递给其他组件以便我可以多次使用它？（也向函数发送道具）

    import { useEffect, useState } from 'react';
    
    export default function UpdateNum(change) {
      const [numberCon , setNumber ] = useState(0);
    
      useEffect(() => {    
          setNumber(numberCon + 1)
      },[change])

      return numberCon;

    }

我想在 Shop.jsx 中获取 numberCon 状态 value={} 属性

import UpdateNum from './functions/UpdateNum';

  <div className='cart-icon' value={''}>
            <FaShoppingCart size={40} />
          </div>

还有 Items.jsx 和我一样 -

import UpdateNum from './functions/UpdateNum';

 return (
    <div >
      <h1 style={{ marginLeft: '30px' }}>
         <UpdateNum/> - Items  <br />
      </h1>
    </div>
  );

Answer 1

UpdateNum 函数应该 return 一个组件，如果您希望该函数 return 实际状态值，那么您需要将其作为自定义挂钩。

在函数名称前加上 use 前缀，以便 React 知道它是一个自定义钩子。

import { useEffect, useState } from 'react';

export default function useNumberCon() {
  const [numberCon , setNumber ] = useState(0);

    function riseNum() {   //Some function to calculate a number
      setNumber(numberCon + 1)
  }

  return { numberCon, riseNum};
}

现在，在您要使用此 numberCon 和 riseNum（Shop.jsx 和 Items.jsx）的组件中，您可以执行此操作


// In Shop.jsx
const { numberCon, riseNum } = useNumberCon();

 ......
 ......

 <div className='cart-icon' value={numberCon}>
       <FaShoppingCart size={40} />
 </div>

如果您的 <Shop /> 和 <Items /> 是彼此的兄弟，那么您需要在包装它们的父组件中添加自定义挂钩调用（步骤 #2）。

参考：

Custom Hooks

Lifting State Up

Answer 2

如果所有组件共享相同的 parent，您可以将函数作为 prop 传递：https://www.robinwieruch.de/react-pass-props-to-component

如果它们共享不同的 parent，或者您不想麻烦地传递函数，您可以制作自己的钩子：https://reactjs.org/docs/hooks-custom.html#using-a-custom-hook

Answer 3

1) 在新文件中隔离您需要的函数和 return。

export const updateNum = (reciveParam) => {
   
        // do your calculation with reciveParam
        
        return value
     }

2)导入所需组件中的函数

import updateNum from './util/updateNum';

const returnValue = updateNum(passParams);

3)从这里访问

<div className='cart-icon' value={returnValue}>
   <FaShoppingCart size={40} />
</div>

从组件获取状态并将其显示为 div 中的值属性？

Getting a state of from a component and show it as a value attribute inside a div?

reactjs

attributes

export

react-props