React w/Typescript: passing <Link> as part of prop to child component-CodePudding

I am trying to pass a prop to a child component, where the prop includes a <Link>. Here is the relevant code:

Label.tsx

export default function Label(props: LabelProps) {
return (
    <label className={props.addClass} htmlFor={props.label}>
        {props.title}
    </label>
    );
}

Label.ts

export interface LabelProps {
    label: string,
    title: string,
    addClass?: string
}

Singup.tsx

<Label label='acceptTerms' title={`I accept the ${<Link to='./terms'></Link>}`} />

The output from the following is:

I accept the [object Object]

What Typescript type do I need to use for the title property to render this correctly?

CodePudding user response：

Use type React.ReactNode (instead of string).

When passing a "complex" content:

<Label
  label='acceptTerms'
  title={(
    <>
      I accept the <Link to='./terms'></Link>}
    </>
  )}
/>