如何在反应中将类组件作为功能道具传递？

Question

Trying to send component as a prop using lambda function and TSLint throws exception.

A component can be sent as a prop like this:

<Test
  id={'XYZ-1809'}
  condn1={<Condn1Component />}
  condn2={<Condn2Component />}
/>

But when trying to send it as a functional prop, throws an error as: Lambdas are forbidden in JSX attributes due to their rendering performance impact (jsx-no-lambda)tslint(1)

<Test
  id={'XYZ-1809'}
  condn1={() => <Condn1Component />}
  condn2={() => <Condn2Component />}
/>

Condn1Component and Condn2Component can be a functional or class component that is unsure.

What's the best possible way to get rid of JSX-Lambda issue?

Answer 1

I managed to do this like below:

const Condn1Component = () => {
   return (<h1>I am condition1</h1>);
} 

const Condn2Component = () => {
   return (<h1>I am condition2</h1>);
} 

const condn1ComponentHandler = () => {
  return <Condn1Component />
}

const condn2ComponentHandler = () => {
  return <Condn2Component />
}

<Test
  id={'XYZ-1809'}
  condn1={condn1ComponentHandler}
  condn2={condn2ComponentHandler}
/>

And accepted as:

this.props.condn1();
this.props.condn2();