Question

我正在使用react-navigation，并尝试通过向其传递字符串来动态自定义堆栈导航栏中使用的标题，但是我一直收到以下错误消息：

Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render.

我的代码如下：

RootComponent.js

export class RootComponent extends Component {
    render() {
        return (
            this.props.loggedIn ? <SignedIn2 title={this.props.username}/> : <SignedOut />
        );
    }
}

router.js：

import { createStackNavigator, createBottomTabNavigator } from "react-navigation";

export const SignedIn2 = (props) => {
    return createStackNavigator({
        SignIn: {
            screen: SignInScreen,
            navigationOptions: {
                title: props.title
            }
        }
    });
};

我需要做些什么才能使它起作用？看来我误解了一些基本知识。

Answer 1

createStackNavigator返回组件函数，而不是元素。

const SignedIn2 = (props) => createStackNavigator(..)

具有签名

SignedIn2 :: Props -> Props -> React.Element

这意味着当您使用Props调用SignedIn2时，您将返回一个函数。很有可能是一种更好的方法，但是要立即进行此工作，您需要执行以下操作：

export const SignedIn2 = (props) => {
  const navigator = createStackNavigator(...)
  return React.createElement(navigator, {})
}

理想情况下，createStackNavigator仅应调用一次。或者，您可以

export class RootComponent extends Component {
    render() {
        return (
            this.props.loggedIn ? React.createElement(SignedIn2({ title: this.props.username })) : <SignedOut />
        );
    }
}

但这会令人难以置信。

如何将属性传递给React函数组件？

1 个答案: