React 和 Javascript：等同于 C 函数原型？

问题描述

我用 React 做的一些实验得到了以下代码：

const BreadNav = props => {
  const initial={
    stack:[
      {
        name:"Home",render:React.cloneElement(
          props.children,{pushElement:pushElement}
        ),state:{}
      }
    ],};

  const [state,setState] = React.useState(initial);

  const pushElement = (oldState,elem) => {
    let newStack = JSON.parse(JSON.stringify(state.stack));
    newStack[newStack.length-1].state = oldState;
    newStack.push(elem);
    setState({
      ...state,stack:newStack
    });
  }
  
  return(
    state.stack[state.stack.length-1].render
  );
}

React 给了我 ReferenceError: can't access lexical declaration 'pushElement' before initialization，这对行的顺序很有意义。如果这是 C，我只会抛出一个函数原型来声明 pushElement 并稍后定义它，但我没有没有看到对此的 javascript 答案。我该如何避免这个麻烦？

解决方法

您可以使用函数声明，即“hoisted”，而不是将函数值分配给 const 变量：

function BreadNav(props) {
  const initial = {
    stack: [
      {
        name: "Home",render: React.cloneElement(props.children,{pushElement}),state: {}
      }
    ],};

  const [state,setState] = React.useState(initial);

  function pushElement(oldState,elem) {
//^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    let newStack = JSON.parse(JSON.stringify(state.stack));
    newStack[newStack.length-1].state = oldState;
    newStack.push(elem);
    setState({
      ...state,stack: newStack
    });
  }
  
  return state.stack[state.stack.length-1].render;
}

但在这种情况下，在您在 initial 对象字面量中使用它之前定义函数 会更合适：

const BreadNav = props => {
  const pushElement = (oldState,elem) => {
    let newStack = JSON.parse(JSON.stringify(state.stack));
    newStack[newStack.length-1].state = oldState;
    newStack.push(elem);
    setState({
      ...state,stack: newStack
    });
  };
  const initial = {
    stack: [
      {
        name: "Home",setState] = React.useState(initial);
  
  return state.stack[state.stack.length-1].render;
}

您仍然可以参考下面声明的 state 和 setState 变量，它们在作用域内，您只需确保在初始化之前不要调用该函数。