Question

我有一个父组件，正在其中创建此函数，并将其传递给另一个组件：

export default withRouter(({ history }) => {
    const selectedRouteStyle = currentPath => {
        if (history.location.pathname === currentPath) {
            return {
                color: '#565958',
                fontWeight: '700',
                borderBottom: '2px solid #4292ff',
            }
        } else {
            return {
                color: '#989e9c',
            }   
        }
    };

    return (
        <Child 
            selectedRouteStyle={selectedRouteStyle}
        />
    );
});

在Child组件中，我这样引用了selectedRouteStyle：

<Link 
    to="/profile/chronology" 
    className="App_profile_navigation_link"
    style={selectedRouteStyle('/profile/chronology')}
>
    Chronology 
</Link>

据我所知，它应该可以正常工作，但实际上我收到此错误：

TypeError: selectedRouteStyle is not a function

如何使反应识别该功能？

Answer 1

如果您使用的是类组件，则应使用this.props.selectedRouteStyle('/profile/chronology')；如果您使用的是函数Component，则需要使用props.selectedRouteStyle('/profile/chronology')

为什么React无法识别传递给另一个组件的函数？

1 个答案: