javascript - 如何在 react 中将类组件作为功能属性传递？

Question

尝试使用 lambda 函数将组件作为 prop 发送，并且 TSLint 会抛出异常。

组件可以作为 prop 发送，如下所示:

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

但是当尝试将其作为功能属性发送时，会抛出错误:由于渲染性能影响 (jsx-no-lambda)tslint(1)，JSX 属性中禁止使用 Lambdas (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();