Question

我遇到这个问题，因为我拥有这个组件

export class MyComponent extends Component {
    myFunc() {

    }

    myFunc2(){

    }
    render this.myFunc() ? (
        <div> 
            { this.myFunc2() ? (
                <AnotherComponent />
            ) : <Fragment />
            }
        </div>
    )
}

但是我遇到错误：functions are not valid as a react child是因为我尝试在渲染块中渲染func2吗？

但是，当我将其分配给const之类的const x = this.myFunc2()并渲染x ? something : null时。错误消失

myFunc和myFunc2都只是根据道具返回true或false，所以为什么会出现此错误？

为什么我得到myFunc2而不是myFunc的错误？

Answer 1

首先，您需要使render之类的函数

render()

第二，您的渲染函数需要返回一个值：

render() { return ....}

最后，您需要完成三元运算符以进行this.myFunc()条件检查

this.myFunc() ? .... : null

这是一个可行的例子：

https://stackblitz.com/edit/react-sdpbgg?file=Hello.js

函数作为反应儿童无效，为什么我得到这个？

1 个答案: