Question

我正在使用一个第三方组件，其中customComponent道具接收一个功能，所以我有这个

<Form customComponent={() => <input type='text'/>}

但是我有条件，所以我决定将customComponent放在功能级别

我以另一种方式做到了

renderCustomComponent = () => {
    //whatever logic goes here
    return () => < input type = 'text' / >
}
render() {
    return <Form customComponent = { this.renderCustomComponent } >
}

为什么我的表格没有任何内容？那两个不是完全一样吗？第二种方法出了点问题。

Answer 1

您忘记了exe renderCustomComponent功能。应该是

render(){
  return <Form customComponent={this.renderCustomComponent()}>}
}

和

renderCustomComponent = () => {
    //whatever logic goes here
    return <input type='text'/>
}

Answer 2

我认为您应该这样做，因为如果customComponent具有验证即它需要功能，然后 @Giang Le 解决方案将不起作用

renderCustomComponent = () => {

    //whatever logic goes here
   return <input type = 'text' />
}
render() {
    return <Form customComponent = { this.renderCustomComponent } >
}

或

renderCustomComponent = (props) => {

    //whatever logic goes here
   return <input type = 'text' />
}
render() {
    return <Form customComponent = { (props)=> this.renderCustomComponent(props) } >
}

通过props作为函数在函数中不起作用

2 个答案: