打字稿孩子与父母有相同的道具，有没有更干净的方法来做到这一点？

Question

Quiz question component prop types :

type Props = {

    question_details: question_details,
    handle_back_click: (event: React.MouseEvent<HTMLButtonElement>) => void
    handle_next_click: (event: React.MouseEvent<HTMLButtonElement>) => void
    question_number:number

}

It renders a child component QuestionButtons like so

   <QuestionButtons

        answer_selected={answer_selected}
        handle_back_click={handle_back_click}
        handle_next_click={(e)=> handle_next(e)}
        question_number={question_number}

    />

Which also has the same props

type Props = {

    answer_selected: string,
    handle_back_click: (event: React.MouseEvent<HTMLButtonElement>) => void
    handle_next_click: (event: React.MouseEvent<HTMLButtonElement>) => void
    question_number:number

}

My question is, is there a cleaner way to do this, so I do not repeat the props, without using redux or moving the QuestionButtons component into the parent quiz question component

Answer 1

You can pass rest props:

   <QuestionButtons
        answer_selected={answer_selected}
        {...props}
    />

which props is those that are same.

Answer 2

You can use the Javascript spread ... operator to do it.

<QuestionButtons
  answer_selected={an swer_selected}
  { ...questionProps }
/>