小编mr_*_*ash的帖子

我知道这个问题被多次提出过,但现在还不清楚.很多人只是说:

如果要访问this.props那些,请将props传递给构造函数

另一个答案的例子

Oficial doc说类组件应该总是用props调用基础构造函数.,但如果我们不通过props到constructor,我们仍然有this.props无处不在exept构造.

另外,从反应源代码中我们可以看到React.Component的源代码 function ReactComponent(props, context) { this.props = props; this.context = context; }

但它让我更加困惑. super()应该用两个参数调用:props和context.但我们调用了我们的超级空,仍然可以访问两个this.props.根据ECMA文档,super()调用constructor()传递给参数的父级super().但我们super()是空的.

所以我的问题是:

1. 为什么官方文档说:

类组件应始终使用props调用基础构造函数.

2. React如何设置props为子组件if super()和constructor()为空？
3. React功能的bug是否可以在子组件中访问道具而不传递道具super()和constructor()？

我正在使用 Angular 6、ngrx/store、ngrx/effects。我有一个应该在我按下“保存”按钮时触发的效果。我正在使用withLatestFrom那里收集将其发送到服务器所需的所有数据：

@Effect({dispatch: false})
  saveAll$ = this.actions$.pipe(
    ofType(ActionTypes.Save),
    withLatestFrom(
      this.store.select(fromReducers.getData1),
      this.store.select(fromReducers.getData2),
      this.store.select(fromReducers.getData3),
      this.store.select(fromReducers.getData4)
    ),
    switchMap(([action, data1, data2, data3, data4]: [ActionType, Data1[], Data2[], Data3[], Data4[]]) => {
       // here is some operations with these data
       return this.apiService.saveData({data1, data2, data3, data4})
    })
)

这是getData1选择器：

export const getData1= createSelector(
  getItems,
  getIndexes,
  (items, indexes) => {
    console.log('HI, I AM getData1');
    return transformItems(items, indexes);
  }
);

getItems，反过来，返回state.items。问题是state.items可以修改成另一种效果：

@Effect()
  handleItemsChanges$ = this.actions$.pipe(
    ofType(ActionTypes.ChangesInItems),
    withLatestFrom(
      this.store.select(fromReducers.getItems),
      this.store.select(fromReducers.getUsers), …

我正在使用ngrx/store和Angular 6。我在商店中有很深的嵌套结构。但是我觉得保持这样的方法不正确：

const state = [
  {
    aliases: ['alias1', 'alias2'],
    isRequired: false,
    isSensitive: false,
    name: 'Adress',
    timezoneId: 'UTC',
    children: []
  },
  {
    aliases: ['alias3', 'alias4'],
    isRequired: true,
    isSensitive: false,
    name: 'Phone',
    timezoneId: 'UTC-5',
    children: [
      {
        aliases: ['alias1', 'alias2'],
        isRequired: true,
        isSensitive: false,
        name: 'Sub-Phone',
        timezoneId: 'UTC-5',
        children: [
          {
            aliases: ['alias-phone1', 'alias-phone2'],
            isRequired: false,
            isSensitive: true,
            name: 'Sub-Sub-Phone',
            timezoneId: 'UTC',
            children: []
          }
        ]
      }
    ]
  }
]

这里的属性name就像id，不能在相同的级别上相同，但是可以在子级中相同。例如Sub-Phone， …

是否有必要在ngrx / entity中保留不会更改的ID？我想使用字符串属性path作为id。是优衣库。但是可以更改。在这种情况下，我应该使用uuid作为id吗？

我正在使用Angular 6，ngrx / store。我有负责更新事物的效果。取决于某些逻辑，我想调度不同的操作。如果我使用switchMapinsted of有map什么区别？

这是我尝试过的，但是不起作用：

 @Effect()
  dispathMultipleActions$ = this.actions$.pipe(
    ofType(ActionTypes.UpdateSomething),
    map(() => {
      const actions: Action[] = [];
      const array = [1, 2, 3, 4, 5];
      array.forEach(item => {
        if (item > 3) {
          actions.push(new DeleteAction(item));
        } else {
          actions.push(new ChangeAction(item));
        }
      });
      return actions;
    })
  );

我正在使用 Angular 6 并且无法为我的应用程序设置图标。它根本不存在。这是我的angular.json文件：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "frontend": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "../wwwroot/dist",
            "deployUrl": "/dist/",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              "src/assets",
              "src/favicon.ico"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                { …

我在我的网站上使用光滑的滑块。而且无论我向左或向右拉滑块多少，它都只会在属性 slidesToScroll 中指定的幻灯片数量上运行。是否有可能用光滑的滑块做一些事情，它像这个滑块http://www.owlcarousel.owlgraphic.com/demos/mousewheel.html一样工作。你拉多少 - 它滚动相同的距离。对不起我的英语不好。谢谢。

有我的 init slick slide 代码：

 $('.slider-wrapper-2').slick({
        slidesToShow: 4,
        slidesToScroll: 4,
        rows: 1
    });

我有这样的对象:

var obj = [
    {
      name: 'ob_1',
      childFields: [],
    },
    {
      name: 'ob_2',
      childFields: [
        {
          name: 'ob_2_1',
          childFields: [
            {
              name: 'ob_3_1',
              childFields: [],
              test: 124
            },
          ],
        },
      ],
    },
  ]

function getObjectByNamePath(path, fieds) {
    const pathArr = path.split('.');
    const result = fieds.find(field => {
      if (pathArr.length > 1) {
        if (field.name === pathArr[0] && field.childFields.length) {
          const newPath = pathArr.slice(1, pathArr.length).join('.');
          return getObjectByNamePath(newPath, field.childFields);
        }
        return false;
      } else {
        if (field.name === pathArr[0]) {
            return …

我有一个平面阵列。像这样：

const inputArray = [
  {
    path: '1',
    id: '1'
  },
  {
    path: '2',
    id: '2'
  },
  {
    path: '3',
    id: '3'
  },
  {
    path: '3.4',
    id: '4'
  },
  {
    path: '3.5',
    id: '5'
  },
  {
    path: '3.4.6',
    id: '6'
  },
  {
    path: '3.4.7',
    id: '7'
  },
  {
    path: '8',
    id: '8'
  },
]

pathid 元素的唯一路径在哪里。例如，path: '3.5'表示此对象是具有 的对象的子对象id: '3'。并且path: '3.4.6'是孩子的path: '3.4'。我想将它们收集到嵌套结构中。所以结果应该是这样的。

const result = [
  {
    path: '1',
    id: '1',
    children: …

很棒的组件。我在Angular 5中使用了最新版本的ngx-chips。我试图使自定义主题与此处相同，但不起作用。这是我的.scss文件：

@import '~ngx-chips/core/styles/core/_core.scss';

$foundation-primary: #1779ba;
$foundation-primary-dark: darken($foundation-primary, 10%);

// this is the container's theme
$foundation-theme: (
container-border-bottom: 1px solid $foundation-primary
);

// this is the tag's theme
$foundation-tag-theme: (
background: $foundation-primary,
background-focused: $foundation-primary-dark,
background-active: $foundation-primary-dark,
background-hover: $foundation-primary-dark,
color: #fff,
color-hover: #fff,
border-radius: 2px
);

// this is the delete icon's theme
$foundation-icon-theme: (
fill: #fff,
fill-focus: #eee,
transition: all 0.35s
);

// apply theme to the container
:ng-deep .ng2-tag-input.foundation-theme {
@include tag-input-theme($foundation-theme);
}

// apply theme to …