reactjs 将函数扩展到React JS钩子组件

mxg2im7a 于 2023-03-01 发布在 React

关注(0)|答案(1)|浏览(123)

是否有机会将next函数（如下面的示例）扩展到<ConfirmForm />组件中？看起来PHPSorm抛出了以下错误：一米二米
错误信息：ReferenceError: Cannot access 'next' before initialization

import useMultistepForm from 'Hooks/useMultipleStep';

const {
  step,
  back,
  goTo,
  isFirstStep,
  lastStepIndex
} = useMultistepForm([
  // Error appears here ->
  <ConfirmForm next={ next } />,
  <ConfirmCard />
]);

使用多级窗体挂接：

export const useMultistepForm = (steps: ReactElement[]) => {
const [currentStepIndex, setCurrentStepIndex] = useState(0);

function next() {
  setCurrentStepIndex((i) => {
    if (i >= steps.length - 1) {
      return i;
    }

    return i + 1;
  });
}

return {
  next
};

reactjs

来源：https://stackoverflow.com/questions/75595433/spread-function-into-react-js-hook-component

1条答案

按热度按时间

nkcskrwz1#

好的，如果我理解正确的话，您需要提供一个由钩子创建的名为next的函数，以将组件传递给该钩子。
你可以通过让钩子接受一个函数来做到这一点，这个函数的参数是由钩子提供的。

function useMultistepForm(
    stepsFn: (next: () => void) => ReactElement[]
) {
  const [currentStepIndex, setCurrentStepIndex] = useState(0);

  function next() {
    setCurrentStepIndex((i) => {
      if (i >= steps.length - 1) {
        return i;
      }
      return i + 1;
    });
  }

  // Call the function to get the rendered components
  const steps = stepsFn(next)
  
  return { // whatever you need here.
    next,
    step: steps[currentStepIndex],
    back: () => undefined,
    goTo: () => undefined,
  }
}

这里的钩子被输入一个函数，这个函数将接受钩子提供的next函数。
该函数返回值是steps。
然后在钩子内部，要获得实际的步骤，需要调用该函数并将next函数传递给它。
可以这样使用：

const { step } = useMultistepForm((next) => [
    <ConfirmForm next={ next } />,
    <ConfirmCard />
]);

有关工作示例，请参见playground

赞(0）回复(0）举报 2023-03-01

我来回答

reactjs 将函数扩展到React JS钩子组件

1条答案

相关问题

热门标签

最新问答