React和Javascript: C函数原型等效吗?

Question

我正在用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对此的答案。我怎样才能避免这种麻烦呢?

Answer 1

您可以使用函数声明，这是"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",
render: React.cloneElement(props.children, {pushElement}),
state: {}
}
],
};
const [state, setState] = React.useState(initial);

return state.stack[state.stack.length-1].render;
}

你仍然可以引用下面声明的state和setState变量，它们在作用域中，你必须确保在它们被初始化之前不要调用函数。