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

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 = () => {&nbsp; &nbsp;return (<h1>I am condition1</h1>);}&nbsp;const Condn2Component = () => {&nbsp; &nbsp;return (<h1>I am condition2</h1>);}&nbsp;const condn1ComponentHandler = () => {&nbsp; return <Condn1Component />}const condn2ComponentHandler = () => {&nbsp; return <Condn2Component />}<Test&nbsp; id={'XYZ-1809'}&nbsp; condn1={condn1ComponentHandler}&nbsp; condn2={condn2ComponentHandler}/>并接受为：this.props.condn1();this.props.condn2();