Question

我正在尝试让App（组件）调用Main（函数），然后调用Leads（组件）并且我想要跟随道具。 Main是返回我的App的所有路由的函数。我正在使用React Router v4。

我在下面尽可能地简化了代码，希望不要太多：

应用程序调用Main并传递道具：lead＆amp;库。

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的一个局部变量，所以有一些东西指向它是一个问题，因为一旦函数运行就会销毁道具。

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应该是一个函数，它只能操纵数据并且不能保存自己的数据......

Main应该是一个功能吗？
我对情况的评估是否准确？
将道具从Main传递到Leads的正确方法是什么？

提前致谢。

Answer 1

当你在一个内部作用域中声明一个与上一个作用域中的另一个名称相同的变量时，“变量阴影”就会知道你的错误，在本例中是变量'props'。

在Main.js中，您正在渲染<Lead />将一个功能组件传递给路由，传递路由器提供给您的props，而不是您在渲染时传递的<Main /> { App.js中的{1}}

我知道有点令人困惑，但这解释了为什么当你将Main更改为Class组件时，它可能正在使用this.props进行调用，对吧？所以在这种情况下，你要打电话给对方。

您可以决定<Main />是否应该是功能组件或类，但通常没有状态的组件应该是有效的。您只需在外部范围（主要部分）或内部（路径）中更改道具的名称。例如：

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

现在，我们正在传递正确的道具。

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

1 个答案: