javascript - 子组件 Prop 是空的，尽管它们是从父组件传递的

Question

我尝试从 Parent 到 Child 函数获取 openMenu 的值，但是 props.value 在 Child 函数中是空的，我不明白为什么。

function Child({ routes }, props) {

  return (

    <div>{props.value}</div>        /*This is empty*/
  )
}

function Parent() {
  const [isOpen, setOpen] = useState({
    isOpen: false
  });

  const handleClick = e => {
    e.preventDefault();
    setOpen(isOpen => !isOpen);

    if(isOpen === true) {
      const openMenu = 'open';
      return <Child value={openMenu}/>;      
    } 
    else {
      const openMenu = 'close';
      return <Child value={openMenu} />     
    }      

  };
}

我想将 openMenu 的值(打开或关闭)传递给子组件。

Answer 1

Props 是 function component 中的第一个参数.

function Child(props) {
  return (   
    <div>{props.value}</div>    
  )
}

如果您尝试从 props 中解构 routes，您可以使用 rest 模式 (...)获得所有其他 Prop 。

function Child({ routes, ...props }) {
  return (   
    <div>{props.value}</div>    
  )
}