小编Tim*_*Tim的帖子

MaterialUI自定义悬停样式

我是React的新手,我对如何覆盖Material UI中的类有些困惑。我看了看这些示例并尝试模仿它,但是它似乎并没有按照我的意愿去做。

基本上,在表格行悬停时,我要使其设置的背景色与当前操作不同。

这是我的方法:

const styles = theme => ({
  root: {
    width: "100%",
    marginTop: theme.spacing.unit * 3
  },
  table: {
    minWidth: 1020
  },
  tableWrapper: {
    overflowX: "auto"
  },
  hover: {
    "&:hover": {
      backgroundColor: 'rgb(7, 177, 77, 0.42)'
    }
  }
});

return <TableRow hover classes={{hover: classes.hover}} role="checkbox" aria-checked={isSelected} tabIndex={-1} key={n.row_id} selected={isSelected}>
     {this.insertRow(n, isSelected, counter, checkbox)}
Run Code Online (Sandbox Code Playgroud)

;

export default withStyles(styles)(EnhancedTable);
Run Code Online (Sandbox Code Playgroud)

谢谢你的帮助!

styles reactjs

13
推荐指数
3
解决办法
1万
查看次数

Firebase在Swift中检索数据

我正在尝试从当前登录的用户中检索特定数据.我的数据库中的数据如下所示:

在此输入图像描述

例如,我想抓取full_name并将其保存在变量userName中.以下是我用来获取数据的方法

ref.queryOrderedByChild("full_name").queryEqualToValue("userIdentifier").observeSingleEventOfType(.ChildAdded, withBlock: { snapshot in
            print(snapshot.value)
            // let userName = snapshot.value["full_name"] as! String
        })
Run Code Online (Sandbox Code Playgroud)

不幸的是,这是我的控制台打印.

在此输入图像描述

我将不胜感激任何帮助:)谢谢!

ios firebase swift

7
推荐指数
2
解决办法
3万
查看次数

React:使用 Material UI 图标作为按钮?

我是 React 和前端开发的新手,我最近开始使用 Material UI。有没有办法将图标与动作挂钩?

我正在寻找这样的东西:

<DeleteIcon onClick={this.handleClick} />

谢谢你的帮助!

reactjs

6
推荐指数
1
解决办法
8446
查看次数

Reactjs 从子组件获取状态值

用另一个问题来回应新手(笑)。我有一个返回通用组件的函数,我想知道是否可以从该组件获取状态值?这是我想要做的:

编辑:我已经根据回复更新了我的一些代码

class CreateTable extends Component {
   constructor(props) {
        super(props_;

        this.state = { elements: [] };
    }

    handleCreateTable() {
        var elements = this.state.elements; // []
        elements.push(<TextInput key={"TableName"} label="Table Name" />)'
        elements.push(
                <DataTable
                    tableName = { elements[0].value } // <--- I'd like to do something like this
                />
            );
        this.setState({ elements: elements })
    }
}
Run Code Online (Sandbox Code Playgroud)

TextInput 有一个孩子 TextField

感谢您的帮助!

reactjs

6
推荐指数
1
解决办法
7037
查看次数

Google OAuth是否可以在iframe中使用?

我想知道Google的OAuth是否可以在iframe中运行?我尝试查找此内容,但找不到确切的内容,因此不胜感激!

背景:当我在普通窗口中将网络应用与Google OAuth一起使用时,这很好,但是当我在iframe中尝试该应用时,它会将我带到空白页,而不是让我选择要使用的帐户登录。

谢谢你的帮助!

oauth google-oauth

5
推荐指数
0
解决办法
789
查看次数

Package.json - NODE_ENV 到生产/部署

我是 Web 开发的新手,最近开始将我的简单 Web 应用程序推送到 GitHub 页面。我很快发现我的页面在集成后不会呈现,react-router因为我的开发和产品 URL 链接不同。

我的问题是,如何设置我的package.json.env以便它能够正确呈现我的 URL?

我的.env文件如下所示:

REACT_APP_PUBLIC_URL="my-site"
Run Code Online (Sandbox Code Playgroud)

我的package.json样子:

"scripts": {
    "start": "NODE_ENV=development react-scripts start",
    "start:prod": "NODE_ENV=production react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  }
Run Code Online (Sandbox Code Playgroud)

在我的内部Index.js,我正在这样做:

if (process.env.NODE_ENV === "production") {
  require("dotenv").load();
}

console.log("PROCESS.ENV.NODE_ENV: ", process.env.NODE_ENV); // This prints "development"
console.log("PROCESS.ENV.PUBLIC_URL: ", process.env.REACT_APP_PUBLIC_URL); // This prints "my-site"
Run Code Online (Sandbox Code Playgroud)

当我运行时npm run …

javascript reactjs react-router

5
推荐指数
1
解决办法
5236
查看次数

MaterialUI 表 - 使用跨度的等宽列?

我正在尝试利用TableMaterial UI 中的组件来构建数据表。但是,我正在努力为我的数据表制作等宽的列。目前我正在尝试这样的事情:

<TableCell key={props.name} style={{width: '25%'}}>
          <span
            style={{
              width: `${(100 / props.numCols)}%`,
              whiteSpace: "pre",
              overflow: "scroll",
              display: 'block'
            }}
          >
            {props.value}
          </span>
 </TableCell>
Run Code Online (Sandbox Code Playgroud)

然而,这似乎并不能解决问题。我希望有 4 列等宽,但在这张照片中,您会看到只能看到 3 列(第 4 列在屏幕外),值得注意的是,第 3 列非常长。我将不胜感激任何指针!

在此处输入图片说明

编辑:似乎该width属性实际上占用了文本长度的 100%?有没有办法让它占据桌子的宽度?

reactjs material-ui

3
推荐指数
2
解决办法
3083
查看次数

MaterialUI - 更改焦点上的颜色文本字段

我正在尝试更改 Textfield 中标签文本的颜色,但我似乎无法弄清楚。

这是我正在尝试的:

<TextField
    value={value}
    key={name}
    label={label}
    id={id}
    name={name}
    InputLabelProps={{
      shrink: true,
      FormLabelClasses: {
        'root': {
          '&:focused': {
            color: 'white'
          }
        },
        focused: 'true'
      }
    }}
  />
Run Code Online (Sandbox Code Playgroud)

有人可以告诉我我在这里做错了什么吗?

我也试过使用,MuiThemeProvider但似乎也无法弄清楚:

const theme = createMuiTheme({
  overrides: {
    MuiFormLabel: {
      focused: true,
      root: {
        '&.focused': {
          color: 'white'
        }
      }
    }
  }
});
Run Code Online (Sandbox Code Playgroud)

如何更改标签的颜色?在这张照片中,我希望“注释”与下划线的颜色相匹配

谢谢你的帮助! 在此处输入图片说明

reactjs material-ui

2
推荐指数
1
解决办法
9189
查看次数

Firebase - 始终检查用户是否登录的最佳方法?

我正在使用 Firebase 进行 React 项目,我想知道始终确认用户已登录的最佳方法是什么?

我目前所做的是在每个登录页面上,检查用户是否已登录以及用户是否已登录,然后进入该页面,如果没有用户登录,则将用户带到登录页面。

但是,我觉得必须有一种更有效的方法,我想知道这里有没有人熟悉这个?

使用商店是这里的最佳方式吗?例如,检查用户是否登录一次,然后更新商店,然后始终询问商店用户是否已登录,而不是 ping Firebase 以查看用户是否已登录。

谢谢你的帮助!

firebase reactjs redux

2
推荐指数
1
解决办法
6900
查看次数

对重音字符进行排序

我正在尝试对带有重音字符的字符串列表进行排序,例如["Zebra", "Apple", "\xc3\x84hhhh"],我希望它看起来像["Apple", "\xc3\x84hhhh", "Zebra"]

\n\n

只是跑步list.sort()给了我["Apple","Zebra","\xc3\x84hhhh"]

\n\n

是否有另一个内置函数(例如localeCompare)可以让我按照我想要的方式对其进行排序?

\n\n

谢谢!

\n

javascript

2
推荐指数
1
解决办法
853
查看次数

试图制作圆形图像

这个问题之前已被问过很多次,但我似乎仍然无法想出这么简单的问题.

我正在尝试拍摄一张图片并将其制作成一个圆圈但是当我尝试这样做时:

const styles = {
  profileImage: {
    padding: "5% 0",
    objectFit: "cover",
    display: "block",
    width: "10vh",
    height: "10vh",
    borderRadius: "50%",
    border: "1px solid white", 
    margin: "0 auto"
  }
}
Run Code Online (Sandbox Code Playgroud)

我的图像仍然看起来像这样: 在此输入图像描述

白色边框是我想要的尺寸,但实际的照片由于某种原因被裁掉了.我会感激任何指针!为此拉了我的头发:-(

谢谢!

html javascript css

1
推荐指数
1
解决办法
39
查看次数

Javascript-如何等待10秒才能返回承诺?

我试图通过使用while循环查看每个HTTP请求之间的响应,但这会导致浏览器异常运行,并迫使我退出它。有人可以给我一些指示吗?我正在尝试发送“唤醒”命令,如果它处于睡眠状态,我会收到408错误,如果它处于唤醒状态,我会得到200 OK。我在想,也许我应该在每个http请求之间添加10秒钟的睡眠功能,但我不认为有像Python中那样的简单“睡眠”功能。

state = "asleep"
while (state === "asleep") {
     this.wakeUp(user).then(function (response) {
          if (response.status === 200):
              state = "awake";
      });
    }

wakeUpVehicle(user) {
    return new Promise(function(resolve) {
      fetch(url + "/wake_up", {
        method: "post",
        headers: {
          "Content-Type": "application/json",
          "Authorization": "Bearer " + access_token
        }
      })
      .then(res => res.json())
      .then(json => {resolve(json["response"])})
    });
  }
Run Code Online (Sandbox Code Playgroud)

我将不胜感激任何帮助!:-) 谢谢

javascript

1
推荐指数
1
解决办法
58
查看次数