typescript中组件的React实例的正确类型是什么

Question

Say I have a component that takes 2 button instances:

export interface GridProps {
  backButton: any;
  nextButton: any;
}

Should the type for the button be React.ReactNode or React.ReactElement

so either:

export interface GridProps {
  backButton: React.ReactNode;
  nextButton: React.ReactNode;
}

or

export interface GridProps {
  backButton: React.ReactElement<any>;
  nextButton: React.ReactElement<any>;
}

Answer 1

React.ReactNode is more convenient way for passing markup to child components. It contains everything you can insert in JSX like <div>{passedContent}</div> It is used in many React component libraries. It makes sense to use React.ReactElement<any> only if you want to restrict customization to elements of particular class. For example React.ReactElement<ButtonProps> . It is useful if you want to clone passed element and append some props to it.