javascript - 如何在响应中将类组件作为功能 Prop 传递？

尝试使用lambda函数和TSLint将组件作为 Prop 发送时会抛出异常。

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

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

但是，当尝试将其作为功能 Prop 发送时，抛出错误: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问题的最佳方法是什么？

最佳答案

我设法做到了这一点，如下所示:

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();