小编Rah*_*gli的帖子

我正在使用带有webpack的style-loader和反应框架.当我在终端中运行webpack时,我正在Module not found: Error: Cannot resolve module 'style-loader'使用import.js文件,尽管我已正确指定了文件路径.

import '../css/style.css';
import React from 'react';
import ReactDOM from 'react-dom';
import jQuery from 'jquery';
import TopicsList from '../components/topic-list.jsx';
import Layout from '../components/layout.jsx';

webpack.config.js:

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'build');
var APP_DIR = path.resolve(__dirname, 'build');

module.exports = {
    entry: [
      // Set up an ES6-ish environment
      'babel-polyfill',

      // Add your application's scripts below
      APP_DIR + '/import.js'
    ],
    output: {
        path: BUILD_DIR,
        filename: 'bundle.js'
    }, …

在数组中添加'react-hot'加载器后出现错误.我已经按照这个教程:https://robots.thoughtbot.com/setting-up-webpack-for-react-and-hot-module-replacement但是,我得到了react-hot.

var WebpackDevServer = require("webpack-dev-server");
var webpack = require('webpack');
var path = require('path');
require("babel-polyfill");

var BUILD_DIR = path.resolve(__dirname, 'build');
var APP_DIR = path.resolve(__dirname, 'src');

module.exports = {
  entry: [
    'babel-polyfill',
    'bootstrap-loader',
    'webpack/hot/dev-server',
    APP_DIR + '/import.js',
  ],
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      loaders: ['react-hot', 'babel'],
      exclude: /node_modules/,
      query: {
        plugins: ['transform-runtime'],
        presets: ['es2015', 'stage-0', 'react']
      }
    }, {
      test: /\.css$/,
      loader: "style-loader!css-loader"
    }, {
      test: /\.scss$/,
      loaders: …

当我尝试将数据从父组件传递到子组件时.我在控制台中收到未定义的消息.数据采用数组的形式.

parent.component.html

<div class="section welcome-section fp-section fp-table" *ngFor="let section of sections">
    <div class="fp-tableCell">
      <app-question-card [data]="section"></app-question-card>
    </div>
  </div>

child.component.ts

@Input() data;
  question = [];
  constructor() {
    this.question = this.data;
  }

  ngOnInit() {
    console.log(this.question); //returns undefined
  }

我正在尝试在Angular 4中实现scrollspy.我在.angular-cli.json文件中导入了jQuery和Bootstrap.js.它没有在控制台中给出任何错误.但是,active类未按li预期应用于元素.

https://v4-alpha.getbootstrap.com/components/scrollspy/

header.component.ts

ngOnInit() {
    $(document).ready(() => {
        $('body').scrollspy({target: "#myNavbar", offset: 50});   
    });
}

header.component.html

<div class="navbar-collapse" id="myNavbar">
  <ul class="nav navbar-nav">
    <li><a href="#PATIENT IDENTIFICATION">Section 1</a></li>
    <li><a href="#INITIATION">Section 2</a></li>
    <li><a href="#section3">Section 3</a></li>
    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#section41">Section 4-1</a></li>
        <li><a href="#section42">Section 4-2</a></li>
      </ul>
    </li>
  </ul>
</div>

我正在使用webpack bundler来编译react js代码.但是,我在使用jquery和velocity js等第三方库时遇到了问题.

我在顶部的自定义js文件中导入了jquery但是,我仍然收到错误.

/* Import libraries stylesheet */
import '../shared/lib/normalize.css';
import '../shared/lib/grid.css';
import '../shared/lib/tiny-scrollbar/tinyscrollbar.css';

/* Import main stylesheet */
import './main.scss';

/* Import libraries script */
import '../shared/lib/jquery-1.12.3.min.js';
import '../shared/lib/tiny-scrollbar/jquery.tinyscrollbar.min.js';
import '../shared/lib/velocity.min.js';
import '../components/card/cards.js';

/* Import main component */
import './main.jsx';

我在 Postgresql DB 和 ExpressJS 中使用 Sequelize。

有 2 种型号Manufacturer和ManufacturerTab. 这两个模型相互关联。ManufacturerhasManyManufacturerTab和ManufacturerTabBeingsTo Manufacturer。尝试获取 ManufacturerTabs 列表时出现错误：

{
    "name": "SequelizeDatabaseError",
    "message": "column ManufacturerTabs.ManufacturerId does not exist",
    "parent": {
        "name": "error",
        "length": 130,
        "severity": "ERROR",
        "code": "42703",
        "position": "704",
        "file": "parse_relation.c",
        "line": "3293",
        "routine": "errorMissingColumn",
        "sql": "SELECT \"Manufacturer\".\"id\", \"Manufacturer\".\"manufacturer_name\", \"Manufacturer\".\"manufacturer_logo_url\", \"Manufacturer\".\"manufacturer_archived_status\", \"Manufacturer\".\"createdAt\", \"Manufacturer\".\"updatedAt\", \"ManufacturerTabs\".\"id\" AS \"ManufacturerTabs.id\", \"ManufacturerTabs\".\"sequence\" AS \"ManufacturerTabs.sequence\", \"ManufacturerTabs\".\"tab_name\" AS \"ManufacturerTabs.tab_name\", \"ManufacturerTabs\".\"createdAt\" AS \"ManufacturerTabs.createdAt\", \"ManufacturerTabs\".\"updatedAt\" AS \"ManufacturerTabs.updatedAt\", \"ManufacturerTabs\".\"ManufacturerId\" AS \"ManufacturerTabs.ManufacturerId\" FROM \"Manufacturers\" …

我正在尝试将每个组件分离到单独的文件以获得更好的模块化.虽然我在索引页面上包含了组件jsx文件,但我仍然可以使用Uncaught ReferenceError: TopicsList is not defined

这是代码:

的index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React.js Demo</title>

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">

    <script src="//code.jquery.com/jquery-2.2.0.min.js"></script>
    <script src="//fb.me/react-0.14.5.js"></script>
    <script src="//fb.me/react-dom-0.14.5.js"></script>
    <script src="//fb.me/JSXTransformer-0.12.2.js"></script>
    <script src="../components/layout.jsx" type="text/jsx"></script>
    <script src="../components/topic-list.jsx" type="text/jsx"></script>
</head>
<body>
    <div id="main-container"></div>
</body>
</html>

layout.jsx

"use strict";

var Layout = React.createClass({

    render: function() {    
        return (
            <div className="container">
                <TopicsList />

            </div>
        );
    }
});

ReactDOM.render(<Layout />, document.getElementById('main-container'));

话题list.jsx

"use strict";
var TopicsList = React.createClass({

    getInitialState: function () {
        return { …

我试图在未定义时设置变量值，但是在尝试使用 vanilla javascript 方法时出现错误。

在声明之前使用的块范围变量“x”。

使用打字稿设置未定义变量的最佳方法是什么？

let x = (typeof x === 'undefined') ? def_val : x;

我正在使用带有 Angular Material 设计的反应式表单组。但是，我收到一个错误：

错误类型错误：无法读取未定义的属性“无效”

指向这行代码：

<input formControlName="fieldName" ngDefaultControl matInput placeholder="Field Name">
<mat-error *ngIf="fieldName.invalid">
  Field name is required
</mat-error>

TS：

export class AddFieldComponent implements OnInit {
  form: FormGroup;

  constructor(public fb: FormBuilder) {
      this.form = this.fb.group({
        fieldName: ['', Validators.required],
        fieldType: ['', Validators.required]
      });
    }
  }

HTML

<div [formGroup]="form" class="add-field">
  <div mat-dialog-content>
    <h2>Add Fields</h2>
    <mat-form-field>
      <input formControlName="fieldName" ngDefaultControl matInput placeholder="Field Name">
      <mat-error *ngIf="fieldName.invalid">
        Field name is required
      </mat-error>
    </mat-form-field>
    <mat-form-field>
      <mat-select formControlName="fieldType">
        <mat-option value="text-field">Text Field</mat-option>
        <mat-option value="radio-btn">Radio Button</mat-option>
      </mat-select>
    </mat-form-field>
  </div>
  <div …

我想为自定义函数创建自定义回调函数并将回调作为参数传递。

function customFunction(a, b, callback) {
  // Some code
}

customFunction("val1", "val2", function(){
  //Code to execute after callback
});