Question

让我们说我的app.js带有一个NavBar组件，该组件具有链接到每个页面路径的链接。

class AppDbContext : DbContext
{
    public AppDbContext() : base("name=appConn") { }

    public DbSet<Product> Products { get; set; }
    public DbSet<ProductReceipt> ProductReceipts { get; set; }
    public DbSet<Receipt> Receipts { get; set; }

    protected override void OnModelCreating(DbModelBuilder modelBuilder)
    {
        //Declare the composite Id
        modelBuilder.Entity<ProductReceipt>()
            .HasKey(table => new { table.ProductId, table.ReceiptId });

        //Should create the left one-to-many relationship
        modelBuilder.Entity<ProductReceipt>()
            .HasRequired<Product>(prore => prore.Product)
            .WithMany(prod => prod.ProductsPerReceipt)
            .HasForeignKey<long>(prore => prore.ProductId);

        //Should create the right one-to-many relationship
        modelBuilder.Entity<ProductReceipt>()
            .HasRequired<Receipt>(prore => prore.Receipt)
            .WithMany(prod => prod.ProductsPerReceipt)
            .HasForeignKey<long>(prore => prore.ReceiptId);

    }


}

我的home组件将进行获取以获取我需要的Home，Contacts＆Profile组件的详细信息，例如：

function App() {
  return (
    <div className="App">
      <Router history={history}>
        <header>
          <NavBar />
        </header>
        <div>
        <Switch>
          <Route path="/" exact component={Home}/>
          <Route path="/profile" component={Profile} />
          <Route path="/contacts" component={Contacts} />
        </Switch>
        </div>
      </Router>
    </div>
  );
}

export default App;

如何将数据对象的其他部分传递给我的其他组件（联系人，个人资料）。我是React Router的新手，所以我不确定它是如何工作的，但是我越来越不喜欢React Hooks。任何指导或方向对此将不胜感激！

Answer 1

您有正确的想法，但基本上，我认为只是将获取的内容升级到应用程序级别。假设您要在应用程序的整个生命周期中保留这些数据，请在App.js中对其进行调用，然后根据需要将这些信息通过props传递给每个子组件。

或者，如果这是一个过于简化的示例，但是您计划在不一定嵌套在App.js中的许多组件之间共享它，则可能需要研究状态管理框架。例如redux或mobx。

通过获取传递道具

1 个答案: