React.js：将道具从函数传递到组件

Question

我正在尝试让 App（组件）调用 Main（函数），而 Main（函数）又调用 Leads（组件），我希望道具跟随。 Main 是为我的应用返回所有路由的函数。我正在使用 React Router v4。

我已经尽可能地简化了下面的代码，希望不会太多：

App 调用 Main 并传递 props：leads & library。

App.js

class App extends Component {
  render() {

    return (
      <div>
        <nav>
          <Link to="/library">Library</Link>
          <Link to="/leads">Leads</Link>
        </nav>
        <Main 
          leads={this.state.leads}
          library={this.state.library}
        />
      </div>
    );
  }
}

export default App;

这里有道具，没问题。然而，我的理解是 props 是函数 Main 的局部变量，因此指向它是问题，因为一旦函数运行，props 就会被破坏。

Main.js （简体）

    const Main = (props) => (

    <main>
        <Switch>
            <Route exact path="/leads" render={(props) => (
                <Lead
                    {...props}
                    leads={props.leads}
                /> )}
            />
        </Switch>
    </main>
)

export default Main;

这里，Leads.js 中的 this.props.leads 指向 null 并且 {Object.keys(this.props.leads)} 失败。 （为简单起见，我删除了 renderLeads() 的代码）

Leads.js （简化版）

class Lead extends React.Component {

    render() {

        return (
            <div>
                <h2>Leads</h2>
                <table>
                    <tbody>
                        {Object.keys(
                            this.props.leads).map(
                            this.renderLeads)}
                    </tbody>
                </table>
            </div>
        );
    }
}


export default Lead;

我已经通过将 Main 设置为 React.Component 的扩展类来“解决”这个问题。我仍然觉得 Main 应该是一个函数，它只处理数据而不保存自己的数据......

1. Main 应该是一个函数吗？
2. 我对情况的评估准确吗？
3. 将道具从 Main 传递到 Leads 的正确方法是什么？

提前致谢。

Answer 1

当您在内部范围内声明一个与位于上层范围内的另一个变量（在本例中为变量“props”）同名的变量时，您的错误就是“变量阴影”。

在 Main.js 中，您正在渲染 <Lead />，将功能组件传递给路由，传递路由器提供给您的 props，而不是您在渲染 <Main /> 时传递的那个应用.js。

我知道这有点令人困惑，但这解释了为什么当您将 Main 更改为 Class 组件时它会起作用，您可能使用this.props 调用，对吧？所以在这种情况下，你叫对了。

您可以决定<Main /> 应该是函数式组件还是类，但通常没有状态的组件应该是函数式的。您可以简单地在外部范围（主要）或内部（路线）中更改道具的名称。示例：

<Route exact path="/leads" render={(routerProps) => (
        <Lead
            {...routerProps}
           leads={props.leads}
        /> )}
    />

现在，我们在线索中传递了正确的道具。