如何修复 - 函数作为 React 子级无效？答案

【问题标题】：How to fix - Functions are not valid as a React child?如何修复 - 函数作为 React 子级无效？
【发布时间】：2021-05-23 11:46:06
【问题描述】：

我正在调用一个返回一些 html 代码的函数。

但是如果我想给这个函数发送一个参数，那么它会告诉我Functions are not valid as a React child，问题是我想从函数中访问props，在为了做到这一点，我将 jsx 中的调用更改为：

... ...
{this.showActivitiesIcon.bind(this)}
... ...

我尝试在组件内部设置状态，并从 componentDidMount 设置状态

    componentDidMount = () => {
        this.setState({
            currentCountry: this.props.country
        })
    }

但是，在componentDidMount内部，没有this.props.country这样的东西，在构造函数内部设置this.componentDidMount.bind(this)是没有用的。我能做些什么来解决它？

【问题讨论】：

【解决方案1】：

你看起来很像：

super(props)

你能分享这个组件的全部代码吗？

【讨论】：

【解决方案2】：

这是正确的语法，因为bind(thisArg) 返回一个函数：

{this.showActivitiesIcon.bind(this)()}

【讨论】：

【解决方案3】：

似乎您没有在 JSX 中调用该函数。

确保在使用它时调用它，以便它返回有效的 JSX。

this.showActivitiesIcon.bind(this)()

【讨论】：