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

Question

尝试使用 lambda 函数和 TSLint 将组件作为道具发送会引发异常。组件可以像这样作为 prop 发送：<Test  id={'XYZ-1809'}  condn1={<Condn1Component />}  condn2={<Condn2Component />}/>但是当尝试将其作为功能性道具发送时，会引发错误：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并且Condn2Component可以是不确定的功能或类组件。摆脱 JSX-Lambda 问题的最佳方法是什么？

Answer 1

我设法做到了如下：

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}

/>

并接受为：

this.props.condn1();

this.props.condn2();