小编Ken*_*all的帖子

我一直在努力创建一个React组件的小型库,以便在其他几个项目中使用.我在内部发布包(使用私有GitHub存储库),然后包含在另一个项目中.但是,当我从包的子目录导入时,由于路径不匹配,我无法这样做.

使用该软件包的项目都利用webpack捆绑/转换代码,因为我试图避免在组件库中进行任何构建(如果可能).

目录结构

- package.json
- src/
  - index.js
  - Button/
    - index.js
    - Button.jsx
    - ButtonGroup.jsx
  - Header/
    - index.js
    - Header.jsx (default export)

的package.json

...
"main": "./src/index.js",
"scripts": "",
...

SRC /按钮/ index.js

import Button from './Button';
import ButtonGroup from './ButtonGroup';

export default Button;

export { Button, ButtonGroup};

SRC/index.js

如果只从子目录导入,这个文件真的是必要的吗？

import Button from './Button';
import ButtonGroup from './Button/ButtonGroup';
import Header from './Header';

export { Button, ButtonGroup, Header };

其他项目

// This project is responsible for building/transpiling …

我正在使用Firebase作为后端存储机制(JSON)的简单JavaScript Twitter克隆.我熟悉关系数据库(SQL),但不熟悉非关系数据库.我目前正在尝试研究如何在Firebase中设计数据集的结构,因为没有外键关系或表连接.

该应用程序有三个表,users,tweets,和followers.用户可以发布推文,也可以关注其他用户并查看推文的摘要.尝试创建数据结构时会出现问题,因为我不知道如何加入必要的表.例如,我将如何实现用户关注功能？

这是我用来给自己起点的ERD:

正如我一直在试图环绕这整个事情的JSON我的头,这是最接近的,我可以将它与关系数据库,同时仍使用火力地堡的.push()功能添加到列表数据库(从火力地堡看到仪表板):

我看到有些人试图通过"取消规范化"数据来解决这个问题,理由是Firebase没有任何查询机制.然而,这些文章都主要是在2014年之前,也就是当火力地堡并添加查询.话虽如此,我不明白使用查询如何帮助我,我想我已经陷入了生成的密钥.

我应该如何最好地构建我的数据以使用Firebase JSON列表？我已经阅读了他们的一些文档,但无法找到任何使用我正在寻找的东西和生成的密钥.

我应该尝试以.set()某种方式使用该方法,并使用电子邮件地址作为用户的"主键"而不是生成的密钥？[如下所述,这是我计划避免的事情.谢谢@metame]

更新

这更像是我应该关注的数据结构吗？然后按键查询？

users: {
    Hj83Kd83: {
        username: "test",
        password: "2K44Djl3",
        email: "a@b.c"
    },
    J3kk0dK4: {
        username: "another",
        password: "33kj4l5K",
        email: "d@e.f"
    }
}

tweets: {
    Jkk3ld92: {
        userkey: "Hj83Kd83",
        message: "Test message here!"
    },
    K3Ljdi94: {
        userkey: "J3kk0dK4",
        message: "Another message here!"
    }
}

followers: {
    Lk3jdke9: {
        userkey: "Hj83Kd83",
        followerkey: "J3kk0dK4"
    }
}

如果我还要包含其他内容,请告诉我!

我目前正在开始一个C#项目,我正在为一台简单的ATM机建模,因此需要几个屏幕.在编写StockTicker棋盘游戏改编之前,我遇到了在屏幕之间传递数据的问题,但我不认为我的解决方法非常好.

我的很多问题源于我MainWindow用作应用程序的主窗口这一事实.我能够轻松地将数据从辅助窗口传递回主窗口,因为我可以Window1在关闭后访问类的属性.但是,为了转移MainWindow到Window2,我必须在构造函数中添加一个参数,Window2这将使我能够传递必要的值.

虽然这适用于小型应用程序,但我认为,对于需要传递的更多内容,这将变得非常冗长/混乱Window2.另外,我不知道一切是如何访问任意的,我申报的方法MainWindow从Window2.由于MainWindow是主屏幕,我的大多数编码都在同类中.

• 我如何访问我已经把方法MainWindow从Window2？

(为了澄清)我花了一些时间环顾四周,找不到明确的例子,特别涉及MainWindow,并需要访问其中的变量/方法.

在这个例子中,我只是表明我已经找到了一种从表单到表单传输数据的方法,但我确信有更好的方法.具体来说,我确信有一个更好的方法,而不是可能编码不同的构造函数与Window2类不同的参数.

namespace Banking_System
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void btnSwitchForm_Click(object sender, RoutedEventArgs e)
        {
            string strForm1Text = txtForm1TextBox.Text;

            Window2 newWindow = new Window2(strForm1Text);
            newWindow.ShowDialog();

            txtForm2TextBox.Text = newWindow.strForm2Text;
        }
    }
}

第二个WPF窗口代码:

namespace Banking_System
{
    public partial class Window2 …

我想知道如何Button从IconButton. 例如，为了更改关闭图标悬停/焦点颜色，我当前需要更改:hover和:focus类。好像应该有这样做的一个简单的方法，在该ButtonBaseAPI文档做实际上提供了这样一个类：focusVisible。但是，我没有尝试成功地应用这种样式。

const useStyles = makeStyles({
  closeButton: {
    "&:hover": { backgroundColor: "yellow" },
    "&:focus": { backgroundColor: "yellow" }
  }
});

const classes = useStyles();

return (
  <IconButton classes={{
      root: classes.closeButton,
      // This gives a warning that "focusVisible" class doesn't exist
      //   on IconButton (which is true, it comes from ButtonBase).
      focusVisible: classes.closeButton
    }}
  >
    <Icon>close</Icon>
  </IconButton>
);

我一生都无法弄清楚这应该如何工作，因为他们的文档没有提到我可以找到的任何类似内容。有任何想法吗？

Icon Button API Docs Button Base API Docs

将 MUI Grid（容器）嵌套在 MUI Stack（已spacing应用）内会导致边距样式出现问题。由于Stack自动“无效”应用于其子级的所有边距（以允许其自己的间距边距），并且Grid容器需要负边距才能正确布局，因此将两者一起使用会导致布局移位（主要是水平方向）。除了必须避免使用Stack带有间距的父级并将所述间距手动应用于所有子级之外，是否有一个好的方法来解决这个问题？这似乎是一个相对常见的用例，我希望找到一种方法来禁用Stack“无效”其子项的边距？

这不起作用，因为父网格Stack“无效”了子网格的负边距，以便应用其自己的间距边距（仅垂直）。

<Stack spacing={2}>
  <Grid container spacing={3}>
    <Grid item>...</Grid>
  </Grid>
  <Grid container>...</Grid>
  <WhateverElse />
</Stack>

.css-1lwbda4-MuiStack-root>:not(style)+:not(style){
  margin:0;margin-top:24px;
}

这是可行的，因为父级Stack没有指定spacing，这允许子级保留其边距（在 的情况下为负边距Grid）。

<Stack>
  <Grid container spacing={3}>
    <Grid item>...</Grid>
  </Grid>
  <Grid container>...</Grid>
  <WhateverElse />
</Stack>```

我正在努力从 HTML 页面创建可打印文档，但输出太大。我不想完全重新设计页面以进行打印（即再次打印所有内容的媒体查询），所以我想知道是否有一种方法可以更改window.print（或窗口打印对话框）设置。

我发现设置等于scale生成80%一个好的PDF；然而，我显然不希望人们必须记住这一点。有没有办法在 Chrome 中做到这一点？

我尝试过调整浏览器页面zoom，但这会导致仅覆盖页面的一部分的相同行为（压缩内容）。该技术基于这个问题：Force page Zoom at 100% with JS。

另外，我也尝试过将body比例调整为transform: scale(0.8);，但也无济于事。这导致 PDF 中的元素周围出现大量我无法删除的空白。

我的"关于"页面上有一个小的"交互式幻灯片",用户可以在其中单击5个按钮中的一个,然后查看生成的"幻灯片".每个"幻灯片"都是一个<section>元素,内部有不同的内容.页面加载时,第一个按钮("关于我")应为红色.以下是其他要求:

• 当用户点击任何按钮时,它应该变为红色而其他所有按钮 都应变为蓝色.
  • 当用户"离开"按钮时,该相同按钮必须保持红色
• 当用户将鼠标悬停在任何按钮上时,它应该变为红色,然后在用户离开时变回蓝色
  • 除非此按钮是当前按钮,否则它必须保持红色
• 有必须是1个按钮是红色的,因为这表示上一张幻灯片.
• 一次只有2个按钮可能是红色的(一个来自前一次点击,一个来自当前悬停).

我有一个.click()完美的工作,但我似乎无法.hover()同时工作的效果.当我运行两个效果时,hover效果会覆盖click效果.一旦我的鼠标在点击它之后离开按钮,背景就会变为dodgerblue,即使它应该保留indianred(我认为这是因为悬停事件的'mouseoff'部分).

我看过类似的问题,但找不到能回答我当前问题的问题.

有什么建议？

var aryButtons = $('.button');
$(aryButtons[0]).css('background-color', 'indianred');

// IMPORTANT - If you comment this section out, the hover effect disappears, but the click function works. However, I need to have both working at once, so that when a button is clicked, it will stay indian red even …

我正在开发一个React应用程序,它有一个带有一些Tabbed内容的模态,偶尔需要滚动.但是,问题是我无法设法滚动正确的内容.

模态分为3个主要部分:

1. 头
   • 应始终在模态的顶部可见
2. 内容
   • 应该填充页眉和页脚之间的空间,但不要强迫观看
3. 页脚
   • 应始终在内容下方可见
   • 这可能意味着在模态的底部(如果内容填充剩余空间)或在内容下面(如果内容 不填充空间)

虽然这很容易实现(我已经这样做了),但问题出现在内容不应该滚动,而是内部应该有的东西.在下面的图像中是两个预期行为的示例,一个具有长内容,应滚动而另一个不滚动.

我正在使用一个自定义Tabbed组件,它在容器内呈现内容.如果需要,此容器(下图中的白色)应滚动.

我可以在下面的CodePen和示例代码中找到最远的地方.我目前能够滚动包含预期可滚动内容的元素,但实际上无法滚动该内容.如果您检查笔,您可以看到它(由于某种原因)延伸超过包含元素.

代码示例

CodePen示例

HTML

<div class="modal">
  <div class="background" />
  <div class="modal_content">
    <div class="header">Random header</div>
    <div class="tabbed_content">
      <div class="tabs">
        <div class="tab active">Tab 1</div>
        <div class="tab">Tab 2</div>
      </div>
      <div class="content">
        <div class="scrollable">
          Tabbed Content
          <br /><br /><br /><br /><br /><br />
          Another Couple Lines
          <br /><br /><br /><br /><br /><br /> …

我通过这篇文章在 React 中实现了一个“槽”系统：Vue Slots in React。然而，由于 Enzyme 包装器的子级和 React 的子级之间的“不匹配”，我在尝试测试该组件时遇到了麻烦。

这是从 React 获取“槽”子级的函数children。当提供childrenprop 时，该函数在应用程序组件中按预期工作，但在测试期间不起作用，因为“子项”与React.children.

const getSlot = (children, slot) => {
  if (!children) return null;

  if (!Array.isArray(children)) {
    return children.type === slot ? children : null;
  }

  // Find the applicable React component representing the target slot
  return children.find((child) => child.type === slot);
};

它TestComponent并不直接在测试中使用，而是旨在展示如何在组件中实现“槽”的示例。

const TestComponent = ({ children }) => {
  const slot = getSlot(children, TestComponentSlot);

  return ( …

我最近一直在使用新的 Unity UI 工具包 (Unity 2021.1)，但注意到 UI 生成器不包含进度栏的定义。这似乎是游戏的标准部分（健康统计等），令我震惊的是，我既意识到没有内置组件，又找不到关于它的指南。我确信我一定是在错误的地方寻找，并希望有人能指出我正确的方向。

我当前的方法是使用 Slider 组件并尝试通过自定义 USS 工作表进行样式设置。然而，我注意到新的 UI 系统与旧的不同，并且无法指定“覆盖”颜色。关于如何处理这个问题有什么建议吗？我看过 UI Toolkit 示例的屏幕截图，其中示例中包含进度条；然而，当前的样本没有这个。