从父组件传递函数到子组件答案

【问题标题】：passing function from parent to child component从父组件传递函数到子组件
【发布时间】：2018-10-23 04:58:30
【问题描述】：

我正在尝试进行单页应用程序导航，因此当用户单击菜单链接时，组件会加载到页面容器中。这是我尝试过的：

App.tsx：

import * as React from 'react';

import Home from './components/Home';
import MainMenu from './components/MainMenu';
import SignUp from './components/SignUp';

interface IProps {
  SignUp?: boolean;
}

interface IState{
  SignUp: boolean;
}

class App extends React.Component<IProps,IState>
{
  constructor(props: IProps, state: IState) {
    super(props);
    this.renderPage = this.renderPage.bind(this);
    this.state = state;
    this.setState({
      SignUp: false
    });
  }

  public renderPage(page: string)
  {
    if(page === 'SignUp')
    {
        this.setState({
          SignUp: true
        });
    }
  }

  public render()
  {
    let page = <Home/>;

    if(this.state.SignUp)
    {
      page = <SignUp/>;
    }

    return (
      <div className="App">
        <MainMenu renderPage={this.renderPage}/>
        <div className="container-fluid">
           {page}
        </div>
      </div>
    );
  }
}

export default App;

MainMenu.tsx：

import * as React from 'react';

import './Home.css';

interface IProps
{
    renderPage: (page: string) => void
}

class MainMenu extends React.Component<IProps> {
  public render() {
    return (
        <nav className="navbar navbar-expand-lg navbar-light bg-light">
            <div className="collapse navbar-collapse" id="navbarSupportedContent">
                <ul className="navbar-nav mr-auto">
                    <li className="nav-item active">
                        <a className="nav-link" href="#" onClick={this.props.renderPage('Home')}>
                            Home
                        </a>
                    </li>
                    <li className="nav-item">
                        <a className="nav-link" href="#" onClick={this.props.renderPage('SignUp')}>
                            Sign Up
                        </a>
                    </li>

                </ul>
            </div>
        </nav>
    );
  }
}

export default MainMenu;

我在 MainMenu.tsx 中收到此错误：

类型 'void' 不能分配给类型 '((event: 鼠标事件）=> 无效）|未定义'。

【问题讨论】：

为什么不使用像react-router-dom 这样的路由器根据<a> 的点击来呈现不同的视图？
@AlexanderStaroselsky 实际上我不知道这是否是制作单页应用程序的正确方法，这是我的第一个反应应用程序

标签： reactjs typescript

【解决方案1】：

在 MainMenu 组件中调用传递的函数，而不是将其分配给 a 元素。

<a className="nav-link" href="#" onClick={() => this.props.renderPage('SignUp')}>
    Sign Up
</a>

上面的例子应该可以解决错误，即使你没有传递事件参数。

但是，如果你使用 react-router 会不会更好，它会根据导航来处理渲染组件？

【讨论】：

你不能在 JSX 中使用 Lambda 函数
你试过这个还是你认为它不能工作？这里声明了一个事件触发的函数。这在 React 中很常见。