Реквизиты дочерних компонентов пусты, хотя они передаются из родительского компонента

Question

Я пытаюсь получить значение openMenu из функции Parent to Child, но 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 Child(props) {
  return (   
    <div>{props.value}</div>    
  )
}

Если вы пытаетесь деструктировать routes из props, вы можете использовать шаблон rest (...), чтобы получить все остальные реквизиты.

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

Answer 2

может быть, вы должны иметь представление об отправке реквизита и его деструкции,

// suppose props = { val1, val2, val3 }

const Parent = (props) => <Child {...props} />

// in such case you can destructure the values in the paranthesis itself,

const child = ({ val1, val2, val3 }) => {
 <div>
  <div>{val1 && val1}</div>
  <div>{val2 && val2}</div>
  <div>{val3 && val3}</div>
 <div>
}


// which is same as,

const child = (props) => {
 const { val1, val2, val3 } = props
 //rest of the code..
}

также вы можете отправить несколько реквизитов как,

class Parent extends Component {
 // ..
function1 = () => {..}

function2 = () => {..}

 render () {

 //suppose this.props = { match, dispatch, list, ..}
 const value1 = ..
 const value2 = ..

  return <Child {...{ function1, function2, value1, value2}} {...this.props} />
}

и разделить их на ребенка как,

const Child = ({
 function1,
 function2,
 value1,
 value2,
 match,
 dispatch,
 list,
 }) => {
  return (
   <div> .. </div>
}

теперь вы можете видеть, насколько это удобно, и вы больше не споткнетесь ... Примечание: .. (двойные точки заполняют пробелы, вы знаете)