小编Jam*_*ney的帖子

当我使用typescript创建我的react项目时，我引入了Redux错误报告，这表明我找不到它，但我必须安装所有依赖项。

这是我的 package.json

{
  "name": "react-test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@types/jest": "^24.0.11",
    "@types/node": "^11.11.3",
    "@types/react": "^16.8.8",
    "@types/react-dom": "^16.8.2",
    "@types/react-redux": "^7.0.3",
    "@types/react-router-dom": "^4.3.1",
    "axios": "^0.18.0",
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-redux": "^6.0.1",
    "react-router-dom": "^4.4.0",
    "react-scripts": "2.1.8",
    "redux": "^4.0.1",
    "redux-devtools-extension": "^2.13.8",
    "redux-thunk": "^2.3.0",
    "typescript": "^3.3.3333"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": { …

我用 react-semantic-ui 创建了卡片，我想通过 css 类添加一些额外的样式。

一个例子是：

我添加了带有 box-shadow 属性的自定义“卡片”类，但未应用该样式。

          HTML PART:

import './App.css';


          {/* CLAIM CARDS SECTION */}

                  <Card className='card'>
                    <Card.Content>
                      <Card.Header style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>       
                        <h4>
                          Church Mutual Worker's Compensation Claim 
                          <span style={{marginLeft: '130px'}}>Claim #1234567</span>
                        </h4>
                      </Card.Header>
                    </Card.Content>
                  </Card>

CSS 代码部分：App.css

 .header-height {
      height: 12rem;
    }

    .header-title-color {
      color: black;
      font-weight: bold;
    }

    .card {
      box-shadow: 2px 2px 2px 2px grey;
      width: 100%;
    }

    .red {
      color: red;
    }

有人有解决方案如何将自定义 css 类添加到 React-semantic-ui 组件吗？

谢谢

我有表中显示的用户列表.活动用户应排在非活动用户之上.

我试图sort使用lodash sortBy函数,但没有成功.

这是userArray看起来如何:

const userArray [
  { 
    // I need to show users which have disabled = false first 
    // and then users with disabled = true
    disabled: true,  // <==========
    email: "hgaither@cmregent.com",
    firstName: "Harriet",
    lastName: "Gaither",
    role: "claimsHandlerSupervisor",
    userId: "03VFpxtMWgY1jKDHDLcrWSw1qzx1",
  }, 
  {
   disabled: false,  // <===========
   email: "hgaither@cmregent.com",
   firstName: "Harriet",
   lastName: "Gaither",
   role: "claimsHandlerSupervisor",
   userId: "03VFpxtMWgY1jKDHDLcrWSw1qzx1",
 }, 
]

这里是带有用户数组和sortBy loadsh函数的代码的代码笔:https://codepen.io/nikolatrajkovicq/pen/pGXdpM？editors = 1112

欢迎任何adivce.

我通过Node.js(nodemailer)和firebase制作了一个电子邮件服务.

当我在应用程序中创建新用户时,该新用户应该收到带有链接重新密码的欢迎电子邮件.

现在我需要在node.js中实现firebase admin --generatePasswordResetLink

在这行代码中存在问题,错误是generatePasswordResetLink()不是函数:

admin.auth().generatePasswordResetLink(user.email,actionCodeSettings)

// Create user
async function createUser(user) {
  firebase
    .auth()
    .createUser({
      email: user.email,
      password: user.password,
      displayName: `${user.firstName} ${user.lastName}`
    })
// After user is created make a email teamplate and send it
    .then(function(userRecord) {
      let resetLink = ''    
      // Welcome email template
      const output = `
        <p>You have access to the Church Mutual Assignment Tool.</p>
        <p>Follow this link to create new password for your account ${userRecord.email}:</p>
        <p>${this.resetLink}</p>
        <p>Thanks,</p>
        <p>Your Church Mutual Assignment Tool team</p>
      ` …

当ngFor应该呈现7600个字符串项时,性能非常慢,浏览器会冻结几秒钟.

是否有可能提高ngFor的性能？

ng代码:

  <ul *ngIf="isOpen"
    class="nano-drop-down-list"
    dropdownMenu>
    <li class="nano-f-r nano-f-30">
        <input [(ngModel)]="searchString"
               class="nano-f nano-p-0_10 nano-bc-ws hover-effect"
               placeholder="Search..." type="text"/>
    </li>

    <!-- ngFor which should be improved -->
    <li *ngFor="let option of arrayOfOptions | nanoSearchByKey:searchString:displayProperty;"
        [ngClass]="{'active':isOptionSelected(option[valueProperty])}"
        class="nano-f-r nano-f-30 nano-bc-ws hover-effect">
        <button (click)="handleClickOnOption(option[valueProperty]);"
                type="button"
                class="nano-f-c nano-f nano-p-0_10 nano-overflow-h">
            <div class="nano-f-r nano-f">
                <span class="nano-m-aaa0 nano-overflow-e">
                    {{ option[displayProperty] }}
                </span>
                <div *ngIf="isMultiple"
                     class="nano-f-r nano-f-30">
                    <i *ngIf="isOptionSelected(option[valueProperty])"
                       class="fa fa-check nano-m-a"
                       aria-hidden="true"></i>
                </div>
            </div>
        </button>
    </li>
</ul>