如何修复 - 函数作为 React 子项无效？

Question

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

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

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

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

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

但是，componentDidMount里面没有this.props.country，在构造函数里面设置this.componentDidMount.bind(this)也没用。我能做些什么来修复它？

Answer 1

你看起来像：

super(props)

你能分享这个组件的完整代码吗？

Answer 2

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

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

Answer 3

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

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

this.showActivitiesIcon.bind(this)()

How to fix - Functions are not valid as a React child?