小编Hem*_*ari的帖子

我想将低于颜色的线性渐变添加到Material-UI Chip作为背景色。可能吗？

linear-gradient(to right bottom, #430089, #82ffa1)

我正在使用Material-UI v0.18.7。

<Chip backgroundColor={indigo400} style={{width: 120}}>
     <Avatar size={32} color={white} backgroundColor={indigo900}>A</Avatar>
     This is a Chip
</Chip>

我曾尝试寻找答案，但无法在互联网上找到解决方案。

这看起来很有趣。任何人都可以解释是否有真正的区别。

我在 NodeJS 后端服务中使用 PostgreSQL。突然之间，当我启动服务时，我面临以下错误

 connection error error: sorry, too many clients already.

PostgresSQL 连接配置

 const pg = require(“pg”);
 const client = new pg.Client({
        host: “txslmxxxda6z”,
        user: “mom”,
        password: “mom”,
        db: “mom”,
        port: 5025
 });

由于上述错误，我无法查询数据库。我无法解决这个问题。你能提出解决方案吗

在我觉得做手动功能/对象绑定后,我开始使用箭头功能,并且范围相关的问题令人头疼,但我非常认真地了解使用正常功能(ES5)比使用箭头功能(ES6)更好.

我对这些功能的理解

React中的正常函数:

1. 手动绑定对象/函数以便在函数内部使用状态或道具并避免与范围相关的问题
2. 始终在构造函数中绑定对象/函数,但不直接在渲染中绑定
3. 如果你在构造函数中执行它,那么当你的组件第一次渲染时,Webpack只在bundle.js文件中创建一个新对象/函数
4. 如果你直接在渲染中执行它,那么每次组件渲染和重新渲染时,Webpack都会在bundle.js文件中创建一个新对象/函数
5. 如果你没有绑定,那么你就无法访问状态或道具.您必须将当前对象分配给本地变量,否则this.state或this.props是未定义的

React中的箭头功能:

1. 无需在构造函数中绑定对象/函数也不需要渲染
2. 你不需要依赖当前对象的局部变量interms,即,让那=这个;
3. 您不会有范围问题,并且会自动进行对象/功能绑定

但我的查询是,我听说它建议使用正常的功能,并将其绑定在构造函数,而不是使用箭头功能,因为箭头功能创建新的对象/功能的WebPack bundle.js每次你的组件呈现和重新呈现时间.

这是真的？推荐哪个？

这个线程接受了答案在React中正确使用箭头函数说 - >这取决于你在哪里使用箭头功能.如果在render方法中使用了Arrow函数,那么每次调用render时它们都会创建一个新实例,就像bind的工作方式一样.

对不起,如果你觉得这是一个戏剧性的问题,但这是我最大的疑问.请建议

我试图在nodejs中使用三元运算符进行条件检查.

三元运算符在下面的场景中没有问题,工作正常.它在控制台中打印文本

{true ? (
  console.log("I am true")      
) : (
  console.log("I am not true")
)}

同样的情况不适用于以下情况,并且会引发跟随错误

让text ="我是真的";

  ^^^^ 

Run Code Online (Sandbox Code Playgroud)

SyntaxError:意外的标识符

{true ? (
  let text = "I am true";
  console.log(text);      
) : (
  console.log("I am not true")
)}

我无法理解为什么这种行为有所不同.

我有一个注册表单，我想以简单快捷的方式验证电子邮件。

现在我正在使用长正则表达式进行电子邮件验证，如下所示。

import React, { Component } from 'react';
import TextField from 'material-ui/TextField';

const emailPattern = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

export default class Register extends Component {
  constructor(props) {
    super(props);

    this.state = {
      emailError: '',
      email: ''
    };
  }

handleTouchTap = () => {
    if(this.state.email == '' || this.state.email == null){
      this.setState({
      emailError: "Email cannot be empty"
    });
    }
    else if (!emailPattern.test(this.state.email) && this.state.email.length > 0) {
      this.setState({
        emailError: "Enter a valid email"
      });
    }
    }else{

      let data = {};
      data.email = this.state.email; …

我刚开始使用打字稿并尝试为打字稿类创建一个实例，但我没有成功。

下面是我的文件

应用程序

import { EventEmitter } from 'events';

interface Emitter extends EventEmitter {

}
class App {
   constructor(protected app: Emitter){}
}

export default = App;

我正在App.js使用tsc命令生成 App.ts 到文件。该文件在 dist 文件夹中生成为App.js

我有另一个名为 Test.js 的文件

在 Test.js 中，我正在导入生成的 App.js 文件并为其创建一个实例，如下所示，但出现以下错误

类型错误：应用程序不是构造函数

测试.js

const App = require("./dist/App);

module.exports = function(app){
    const appInstance = new App(app)
}

我不明白为什么会抛出这样的错误，尽管我在 App.ts 文件中有可用的构造函数。

我在 App.ts 文件中做错了什么，这就是我收到上述错误的原因吗？

我该如何解决这个问题？

我正在阅读react官方文档以了解关于react lazy的知识。

根据文档， https：//reactjs.org/docs/code-splitting.html#reactlazy

呈现此组件时，这将自动加载包含OtherComponent的捆绑包。

React.lazy采用必须调用动态函数的函数import()。这必须返回Promise解析为模块的模块，该模块具有包含React组件的默认导出。

正常导入

import OtherComponent from './OtherComponent';
function MyComponent() {
    return (
        <div>
           <OtherComponent />
        </div>
    );
}

Run Code Online (Sandbox Code Playgroud)

懒导入

const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
    return (
       <div>
           <OtherComponent />
      </div>
    );
}

Run Code Online (Sandbox Code Playgroud)

但是我从文档中对使用惰性导入组件的优势了解得不多。另外，为什么承诺会在导入模块/组件时成为现实？

./node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff中的错误1：4模块解析失败：意外字符''（1：4）您可能需要适当的加载程序来处理此文件类型。（此二进制文件省略了源代码）

WOFF文件无法加载，我不知道文件加载器为何无法加载WOFF，WOFF2和SVG。

这是我的Webpack 4加载程序配置：

module: {
        rules: [
            {
                //tell webpack to use jsx-loader for all *.jsx files
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            },
            {
                test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
                exclude: /node_modules/,
                loader: "file-loader"
            },
            {
                test: /\.(eot|ttf)$/,
                loader: "file-loader",
            },
            {
                test: /\.html$/,
                exclude: /node_modules/,
                loader: 'html-loader'
            },
            {
                test: /\.scss$/,
                loaders: ["style-loader", "css-loader", "sass-loader"]
            }
        ]
    }

请给我一个解决方案。

我正在学习最新的反应功能。根据码头备忘录的工作方式shouldComponentUpdate或PureComponent在功能组件中，但我如何在功能组件中使用此备忘录概念。

假设我有以下组件使用类

import React, { Component } from 'react';
class Test extends Component {
   shouldComponentUpdate(nextProps, nextState) {
     return this.props.text != nextProps.text;
   }
   render(){
     const { text } = this.props;
     return(
       <div>
          <h1>{text}</h1>
       </div>
     )
   }
}

功能组件

function Test = props => {
  const { text } = props;
     return(
       <div>
          <h1>{text}</h1>
       </div>
     )
}

如何在功能组件中使用备忘录编写类组件