是否可以禁用页面的滚动,并且只div对页面内的特定内容启用？

因此,我试图为从服务器获取数据的编辑组件设置初始状态,现在应该可以在组件状态中编辑.但是当我尝试这样做时:

<Query query={POST_QUERY} variables={{ id: this.props.match.params.id }}>
    {({ data, loading, error }) => {
      this.setState({ title: data.title })

我陷入无限循环,因为这是渲染.我不应该将组件状态与查询组件一起使用吗？如果没有,那么替代方案是什么？

背景

在编写用于解析某些文本的类时，我需要能够获取特定字符位置的行号（换句话说，计算该字符之前发生的所有换行符）。

为了找到可能实现此目的的最有效代码，我建立了一些基准测试，这些测试表明Regex是最慢的方法，而手动迭代字符串是最快的方法。

以下是我目前的方法（10000次迭代：278毫秒）：

private string text;

/// <summary>
/// Returns whether the specified character index is the end of a line.
/// </summary>
/// <param name="index">The index to check.</param>
/// <returns></returns>
private bool IsEndOfLine(int index)
{
    //Matches "\r" and "\n" (but not "\n" if it's preceded by "\r").
    char c = text[index];
    return c == '\r' || (c == '\n' && (index == 0 || text[index - 1] != '\r'));
}

/// <summary>
/// Returns the number …

我尝试使用 Firebase (Google) 身份验证，但收到此错误：

\n

此应用程序运行的环境不支持此操作。“location.protocol”必须是 http、https 或 chrome-extension，并且必须启用 Web 存储。

\n

我的代码是：

var provider = new firebase.auth.GoogleAuthProvider();  \n\nfunction Singin(){\n  firebase.auth().signInWithPopup(provider).then(function(result) {\n    var user = result.user;\n    console.log(user);\n  }).catch(function(error) {\n    console.log(error);\n    console.log(error.message)\n  });\n}\n

完整的错误是：

zi {code: "auth/operation-not-supported-in-this-environment", message: "This operation is not supported in the environment\xe2\x80\xa6chrome-extension and web storage must be enabled."}\ncode: "auth/operation-not-supported-in-this-environment"\nmessage: "This operation is not supported in the environment this application is running on. "location.protocol" must be http, https or chrome-extension and web storage …

我正在使用 Victory 来呈现数据集：

class App extends React.Component {
  render() {
    return (
      <div style={{ width: 600 }}>
        <VictoryChart domainPadding={30}>
          <VictoryAxis
            dependentAxis={true}
            style={{
              grid: { stroke: "grey" }
            }}
          />
          <VictoryAxis />
          <VictoryBar
            barWidth={20}
            style={{ data: { fill: "red" } }}
            data={[
              { x: new Date("2019-01-01"), y: 2 },
              { x: new Date("2019-02-01"), y: 3 },
              { x: new Date("2019-03-01"), y: 5 },
              { x: new Date("2019-04-01"), y: 4 },
              { x: new Date("2019-05-01"), y: 8 },
              { x: new Date("2019-06-01"), …

我正在尝试使用不等式和多个运行查询array-contains。

为简单起见，我用虚数据简化了数据结构。假设在一个名为grocerie_packages我有很多文档的集合中。我希望能够根据包裹的名称、包裹的价格以及其中包含的蔬菜和水果来证明搜索。当前的数据结构如下：

{
    price: 10,
    contained_fruits: ["apple", "pear", "grape"],
    contained_vegetables: ["tomato", "cucumber", "carrot"],
    package_name: ["f", "fa", "fam", "fami", "famil", "family", "family_", "family_s", "family_si", "family_siz", "family_size"]
}

一开始，我使用以下代码根据名称进行查询：

.where("package_name", ">=", searchString)
.where("package_name", "<=", searchString + "\uf8ff");

但是后来，当我添加按价格查询的功能时，我遇到了以下问题：

查询无效。具有不等式（<、<=、> 或 >=）的所有 where 过滤器必须位于同一字段中。

我通过创建package_name. 我使用的代码是这样的：

  .where("package_name", "array-contains", package_name_intput)
  .where("price", "<", max_price);

我现在遇到的问题是，因为我array-contains对查询做了一个，所以我无法根据包含的蔬菜和水果进行查询。我不想对客户端进行排序，因为在某些情况下，我可能会返回比需要更多的数千个项目。我也不能将三个数组合二为一，因为我只想返回匹配查询的所有条件的文档。例如，在有人要求的查询中apple，carrot我只想返回包含两者的文档。如果它是一个数组，即使在包中只找到一个项目，它也会返回文档。我只需要为apple每个蔬菜和水果提供一项（如）搜索。

我运行这样的查询的最佳方式是什么？我正在尝试找到一种解决方案，在该解决方案中，我不会为了查询 porpuses 而用许多标志填充文档。例如：

{
   flags: ["apple_tomato_f", "apple_tomato_fa", "apple_tomato_fam", ] //and so on
 }

如何设置<Typography />组件的样式以使其font-color成为渐变？

到目前为止我已经尝试过：

const CustomColor = withStyles({
  root: {
    fontColor: "-webkit-linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
  },
})(Typography);

这不起作用，所以我尝试按照本教程进行操作，并执行了此实现：

const CustomColor = withStyles({
  root: {
    fontSize: 20,
    background: "-webkit-linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
    webkitBackgroundClip: "text",
    WebkitTextFillColor: "transparent",
  },
})(Typography);

这也没有按预期工作，但至少出现了某种梯度。

我尝试过的另一件事是：

<Typography style={{
    fontSize: 20,
    background: "-webkit-linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
    webkitBackgroundClip: "text",
    WebkitTextFillColor: "transparent",
  }}> Hello world! </Typography>

这有点有效，但根据元素的宽度，渐变会发生变化。这是一种不受欢迎的行为。我也想坚持一种withStyles风格解决方案。

在线演示：这里

有什么建议吗？我错过了什么？

我可能已经做了一些更改我的设备权限的操作，因为我收到错误："tcpdump: en0: You don't have permission to capture on that device"。TCP 部分无关紧要，因为我在使用设备时遇到问题bpf。我尝试将权限恢复为默认值，并将它们设置为如下所示，但我仍然遇到问题sudo。

我已重置权限并重新启动多次。另外，我的笔记本电脑被更换了，硬盘是唯一被转移的东西。

zjam@ZimSec:~$ tcpdump -i en0

tcpdump: en0: You don't have permission to capture on that device
((cannot open BPF device) /dev/bpf0: Permission denied
)
zjam@ZimSec:~$ sudo tcpdump -i en0

tcpdump: en0: You don't have permission to capture on that device
((cannot open BPF device) /dev/bpf0: Permission denied)

0 crw-rw----   1 root  access_bpf      23,   0 Aug 22 13:27 bpf0

0 crw-rw----   1 root …

我有一个页面，其中包含多个图像。当页面加载时，它为每个 IMG 提供一个默认图像：

import default from './pics/default.jpg';

<img src={default} alt="#"/>

我想要的是这样的：

<img src1={default} src2="img url" alt="#"/>

其中 src2 在加载时覆盖 src1。

编辑： 第一个图像 (src1) 在页面加载时出现，而第二个 (src2) 是通过 Internet 请求的。示例：https : //cdn.pixabay.com/photo/2016/10/17/10/52/wind-farm-1747331__340.jpg

在我的功能组件的顶部，设置了这些值，这些值不仅在样式中使用，这让我感到困扰：

const testWidth = 100;
const testHeight = 100;

我在自己的样式中使用了其中一些变量...

我想将样式移动到另一个文件，该文件将保留此样式并与某些类名相关，例如'。divWrapperStyle'但我不确定如何与该变量交互' testWidth'

<div
style={{
  borderBottom: 0,
  width: `${testWidth}px`,
  width: 'auto',
  paddingRight: 0,
  paddingLeft: 0,
  paddingTop: 20,
}}
>

因此，我可以在外部.scc文件中创建如下内容：

.wrapper{
    borderBottom: 0,
    paddingRight: 0,
    paddingLeft: 0,
    paddingTop: 20,
 }

导入该文件后，我可能会使用类似的内容：

 <div className="wrapper> 

但是宽度呢？我如何在testWidth变量中包含宽度值？

因此，CSS中使用的变量对我来说是有问题的：/

该如何处理？

谢谢