Question

我已经和React纠缠了几周了。在这一点上，我需要更加高效和灵活地表示数据。我有一个像这样的简单数组：

import java.time.LocalDate;
import java.time.Month;
import java.time.Period;
import java.time.temporal.ChronoUnit;

public class Main
{
    public static void main(String[] args)
    {
        // Long Period
        LocalDate birthA = LocalDate.of(1965, Month.SEPTEMBER, 27);
        LocalDate eventA = LocalDate.of(1992, Month.MAY, 9);
        LocalDate halfA = eventA.plus(Period.between(birthA, eventA));
        System.out.println(halfA); // 2018-12-21 ????
        System.out.println(ChronoUnit.DAYS.between(birthA, eventA)); // 9721
        System.out.println(ChronoUnit.DAYS.between(eventA, halfA)); // 9722 ????

        // Short Period
        LocalDate birthB = LocalDate.of(2012, Month.SEPTEMBER, 10);
        LocalDate eventB = LocalDate.of(2012, Month.SEPTEMBER, 12);
        LocalDate halfB = eventB.plus(Period.between(birthB, eventB));
        System.out.println(halfB); // 2018-09-14
        System.out.println(ChronoUnit.DAYS.between(birthB, eventB)); // 2
        System.out.println(ChronoUnit.DAYS.between(eventB, halfB)); // 2
    }
}

和我的组件类（简化）：

const projects = [
    {
        name: 'Google',
        type: 'Browser',
        img: '/img/projects/new/google.jpg',
        url:'http://google.com/',
    },
    {
        name: 'Windows',
        type: 'OS',
        img: '/img/projects/new/windows.jpg',
        url:'http://microsoft.com/',
    },
    {
        name: 'Apple',
        type: 'Computer',
        img: '/img/projects/new/apple.jpg',
        url:'http://apple.com/',
    },
];

这是codesandbox，您可以根据需要使用它

现在，这是我想学习的内容。如何仅将被单击的项目传递给抽屉？这样，如果单击Windows项，则抽屉的标题中将显示“ Windows”，如果单击“ Google”，则抽屉中的标题将为“ Google”，依此类推。一旦学会了这一点，我就可以从那里展开并将图像传递给Drawer主体以及其他所有东西。本质上将相同的概念应用于模态窗口等。

我正在寻找实用的东西。您在专业领域中最有可能看到的东西（不要将组件拆分为可重复使用的组件，我可以做到这一点，实际上，LSDrawer是可重复使用的组件）

谢谢！

Answer 1

要使一个抽屉动态更改内容，您需要从地图功能中删除“抽屉”，并在您的状态下保存对单击对象的引用，以将适当的数据馈送到“抽屉”组件。

不清楚这是否是示例性代码，但您可以更改打开的处理程序并将其绑定到图标，如下所示：

handleDrawerOpen = (index) => {
    this.setState({ openDrawer: true, currentIndex: index });
  };

...

<a onClick={() => this.handleDrawerOpen(i)}>

并将您的Drawer移到地图调用之外，以根据保存的索引为其指定标题：

        <LSDrawer
          open={this.state.openDrawer}
          clickClose={this.handleDrawerClose}
          title={this.state.projects[this.state.currentIndex].name}
          anchor="top"
          rightButtons={
            <Fab
              color="secondary"
              size="small"
              aria-label="Close"
              onClick={this.handleDrawerClose}
            >
              <CloseIcon />
            </Fab>
          }
        >
          Some info will go in here
            </LSDrawer>

请注意，由于数据存储是其主要功能，因此我还将项目变量保存为状态。

叉子here。

将数据从映射数组传递到MaterialUI抽屉

1 个答案: