小编Sat*_*eni的帖子

我正在尝试使用Cytoscape和ReactJS以及在我尝试的简单组件中没有显示任何内容.

这是代码.我在mapStateToProps中返回一个空对象,因为我试图显示一个静态图形,其中我对边缘和节点进行了硬编码.

我正在使用的Cytoscape版本来自我的package.json

"cytoscape":"^ 2.7.6","反应":"^ 15.2.1",

这是我用于我的样本的Cyctoscape jsbin.

在此输入链接描述

感谢任何帮助.

谢谢

import React,{Component} from 'react';
import cytoscape from 'cytoscape';

import {connect} from 'react-redux';
import { bindActionCreators } from 'redux';

class GraphContainer extends React.Component{
    constructor(props){
        super(props);
        this.renderCytoscapeElement = this.renderCytoscapeElement.bind(this);
    }

    renderCytoscapeElement(){

        console.log('* Cytoscape.js is rendering the graph..');

        this.cy = cytoscape(
        {
            container: document.getElementById('cy'),

            boxSelectionEnabled: false,
            autounselectify: true,

            style: cytoscape.stylesheet()
                .selector('node')
                .css({
                    'height': 80,
                    'width': 80,
                    'background-fit': 'cover',
                    'border-color': '#000',
                    'border-width': 3,
                    'border-opacity': 0.5,
                    'content': 'data(name)',
                    'text-valign': 'center',
                })
                .selector('edge')
                .css({
                    'width': …

我有一组反应组件,我试图在Angular 2应用程序中使用它们.

这是我想要使用的主要反应组件

import React, {Component} from 'react';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import configureStore from './store/configureStore';
import MyCardContainer from './containers/MyCardContainer';
import './assets/style/main.css';
export default class MyCard extends Component {

    constructor(props){
        super(props);
    }

    componentWillMount(){

    }

    render(){
        if(this.props.param1 && this.props.param2) {
            return (
                <Provider store={configureStore()}>
                    <MyCardContainer param1={this.props.param1} param2={this.props.param2} key='container'/>
                </Provider>
            )
        }
        else{
            return(
                <div>
                    Invalid Params are provided for MyCard Component !!
                </div>
            )
        }
    }
}

现在在我的角度项目中,我有以下文件.

app.module.ts

import { BrowserModule …

我使用预先签名的URL将文件从我的应用程序上传到S3，存储桶本身是私有的，并且仅对所有域启用了CORS（对于开发环境）。

但是，当axios帖子尝试上载文件时，我看到没有“ Access-Control-Allow-Origin”标头错误。飞行前选项请求引发此错误。

我正在从本地计算机上尝试此操作。

这是我的CORS配置。我没有为运气尝试过AllowedOrigin的通配符'*'。

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>http://localhost:3000</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <MaxAgeSeconds>300000</MaxAgeSeconds>
    <AllowedHeader>authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

感谢任何帮助。

我想在我的React项目中使用索环,我正在使用webpack.我添加了scss加载器,当我构建我的应用程序时,我收到以下错误:

ERROR in ./~/css-loader!./~/sass-loader!./scss/index.scss
Module build failed: 
@import "inuit-defaults/settings.defaults";
^
      File to import not found or unreadable: inuit-defaults/settings.defaults
Parent style sheet: /Users/hduser/sample-app/node_modules/grommet/scss/grommet-core/_settings.scss
      in /Users/hduser/sample-app/node_modules/grommet/scss/grommet-core/_settings.scss (line 2, column 1)
 @ ./scss/index.scss 4:14-116 13:2-17:4 14:20-122

不知道我做错了什么..

这是我的webpack.config.js

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

module.exports ={
    devtool :'cheap-module-eval-source-map',
    entry:[
        'webpack/hot/only-dev-server',
        './index.jsx'
    ],
    module:{
        loaders:[
            {
                test: /\.jsx?$/,
                exclude :/node_modules/,
                include: __dirname,
                loader:'react-hot'
            },
            {
                test: /\.jsx?$/,
                exclude :/node_modules/,
                include: __dirname,
                loader:'babel',
                query:{
                    "plugins":["transform-decorators-legacy"],
                    "presets":["es2015","react"]
                }
            },
            {
                test :/\.css?$/,
                include: __dirname, …

我试图运行npm作为我的maven构建的一部分.我正在使用exec-maven-plugin,这是我在pom.xml中的插件部分

<plugin>
          <groupId>org.codehaus.mojo</groupId>
          <artifactId>exec-maven-plugin</artifactId>
          <executions>
                <execution>
                  <id>exec-npm-install</id>
                  <phase>generate-sources</phase>

                  <goals>
                    <goal>exec</goal>
                  </goals>

                  <configuration>
                    <executable>npm</executable>
                    <arguments>
                      <argument>build</argument>
                    </arguments>
                    <workingDirectory>${basedir}/src/main/webapp</workingDirectory>
                  </configuration>

                </execution>
           </executions>
        </plugin>

但是,当我运行mvn clean package或者mvn generate-sources npm时,它没有运行.

在我的package.json中,我有以下脚本.

"scripts": {
    "start": "npm run build && serve .",
    "build": "npm run build-js && npm run build-css",
    "watch": "npm run watch-js & npm run watch-css & serve .",
    "watch-build": "npm run watch-js && npm run watch-css && npm run build-js && npm run build-css && serve .",
    "test": "npm run lint -s && …

我试图将我的应用程序转换为使用ES6语法,在我的主模块中,我有配置和运行调用.

我改成了

import * as angular from 'angular';
import {config,run} from './my-config';
import MyAppController from './my-app-controller';

module.exports = angular.module("my-app", [])

    .config(config)

    .run(run)

    .controller('myAppController', MyAppController)

这是my-config.js

import MyService from './my-service';
export function config($compileProvider, $logProvider, localStorageServiceProvider,$stateProvider, $urlRouterProvider){

    console.log('.config() : START ');
    $compileProvider.debugInfoEnabled(true);

    $logProvider.debugEnabled(true);

    localStorageServiceProvider.setPrefix('myapp');
    localStorageServiceProvider.setNotify(true, true);

    $stateProvider.state('home', {
        url: '/',
        views: {
            'main': {
                controller: 'myAppCtrl',
                templateUrl: 'app/home.tpl.html'
            }
        }
    });
    // handle routes here
    $urlRouterProvider.otherwise('/');
}
config.$inject =['$compileProvider', '$logProvider', 'localStorageServiceProvider','$stateProvider', '$urlRouterProvider'];



export function run(MyService) {
    console.log('.run() : ');
    MyService.start();
 }

 run.$inject=['MyService']; …

在使用 vis.js 创建图形时，我们可以使用选项指定如何显示节点。

var options = {
  width: '400px',
  height: '400px',
  edges:{
    style:'arrow'
  },
  nodes:{
    shape:'icon'
  }
};

通过使用“icon”作为样式，我们使用 bootstrap 或 fontawesome 字形图标。该文档讨论了使用 unicodes。

创建了一个Plunker，但图标没有显示出来。

http://plnkr.co/edit/DFYz26SOxGY9IvMqSuKm?p=preview

不知道我做错了什么。

谢谢