Reactjs 细胞景观与反应整合

我正在尝试将Cytoscape与ReactJS一起使用，以及如何在我尝试的简单组件中不显示任何内容

这是代码。我在MapStateTops中返回一个空对象，因为我试图显示一个静态图形，其中我硬编码了边和节点

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

“细胞景观”：“^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': 6,
                    'target-arrow-shape': 'triangle',
                    'line-color': '#ffaaaa',
                    'target-arrow-color': '#ffaaaa',
                    'curve-style': 'bezier'
                })
                ,
            elements: {
                nodes: [
                    { data: { id: 'cat' } },
                    { data: { id: 'bird' } },
                    { data: { id: 'ladybug' } },
                    { data: { id: 'aphid' } },
                    { data: { id: 'rose' } },
                    { data: { id: 'grasshopper' } },
                    { data: { id: 'plant' } },
                    { data: { id: 'wheat' } }
                ],
                edges: [
                    { data: { source: 'cat', target: 'bird' } },
                    { data: { source: 'bird', target: 'ladybug' } },
                    { data: { source: 'bird', target: 'grasshopper' } },
                    { data: { source: 'grasshopper', target: 'plant' } },
                    { data: { source: 'grasshopper', target: 'wheat' } },
                    { data: { source: 'ladybug', target: 'aphid' } },
                    { data: { source: 'aphid', target: 'rose' } }
                ]
            },

            layout: {
                name: 'breadthfirst',
                directed: true,
                padding: 10
            }
            }); 
    }

    componentDidMount(){
        this.renderCytoscapeElement();
    }

    render(){
        return(
            <div className="node_selected">
                <div style="{height:'400px';width:'400px'}" id="cy"/>
            </div>
        )
    }
}

function mapStateToProps(state){
    return {};
}


export default connect(mapStateToProps,null)(GraphContainer);

import React，{Component}来自'React'；
从“细胞景观”导入细胞景观；
从'react redux'导入{connect}；
从“redux”导入{bindActionCreators}；
类GraphContainer扩展了React.Component{
建造师（道具）{
超级（道具）；
this.rendercytoscapelement=this.rendercytoscapelement.bind（this）；
}
renderCytoscapeElement（）{
log（'*Cytoscape.js正在呈现图形..'）；
this.cy=细胞景观(
{
容器：document.getElementById（'cy'），
boxSelectionEnabled:false，
自动取消选择：true，
样式：cytoscape.stylesheet（）
.selector（'节点'）
.css({
身高:80,，
“宽度”：80，
“背景适合”：“封面”，
“边框颜色”：“000”，
“边框宽度”：3，
“边框不透明度”：0.5，
“内容”：“数据（名称）”，
“text valign”：“center”，
})
.selector（'边'）
.css({
“宽度”：6，
'目标箭头形状'：'三角形'，
“线条颜色”：“ffaaa”，
“目标箭头颜色”：“ffaaa”，
“曲线样式”：“贝塞尔”
})
,
要素：{
节点：[
{数据：{id:'cat'}}，
{数据：{id:'bird'}}，
{数据：{id:'瓢虫'}}，
{数据：{id:'aphid'}}，
{数据：{id:'rose'}}，
{数据：{id:'蚱蜢'}}，
{数据：{id:'plant'}}，
{数据：{id:'小麦'}}
],
边缘：[
{数据：{源：“猫”，目标：“鸟”}，
{数据：{源：'鸟'，目标：'瓢虫'}，
{数据：{来源：'鸟'，目标：'蚱蜢'}，
{数据：{来源：'蚱蜢'，目标：'植物'}，
{数据：{来源：'蚱蜢'，目标：'小麦'}，
{数据：{来源：'瓢虫'，目标：'蚜虫'}，
{数据：{来源：'aphid'，目标：'rose'}
]
},
布局：{
名称：“面包第一”，
导演：是的，
填充：10
}
}); 
}
componentDidMount（）{
this.rendercytoscapelement（）；
}
render（）{
返回(
)
}
}
函数MapStateTops（状态）{
返回{}；
}
导出默认连接（MapStateTops，null）（GraphContainer）；

我能够解决这个问题。我错过了图层本身的样式，因此它默认为0px高度和0px宽度

---

感谢那些仍在寻找如何让代码发布工作的人，我能够通过修改cy div使其工作，并使用非零高度和宽度指定其样式

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': 6,
                    'target-arrow-shape': 'triangle',
                    'line-color': '#ffaaaa',
                    'target-arrow-color': '#ffaaaa',
                    'curve-style': 'bezier'
                })
                ,
            elements: {
                nodes: [
                    { data: { id: 'cat' } },
                    { data: { id: 'bird' } },
                    { data: { id: 'ladybug' } },
                    { data: { id: 'aphid' } },
                    { data: { id: 'rose' } },
                    { data: { id: 'grasshopper' } },
                    { data: { id: 'plant' } },
                    { data: { id: 'wheat' } }
                ],
                edges: [
                    { data: { source: 'cat', target: 'bird' } },
                    { data: { source: 'bird', target: 'ladybug' } },
                    { data: { source: 'bird', target: 'grasshopper' } },
                    { data: { source: 'grasshopper', target: 'plant' } },
                    { data: { source: 'grasshopper', target: 'wheat' } },
                    { data: { source: 'ladybug', target: 'aphid' } },
                    { data: { source: 'aphid', target: 'rose' } }
                ]
            },

            layout: {
                name: 'breadthfirst',
                directed: true,
                padding: 10
            }
            }); 
    }

    componentDidMount(){
        this.renderCytoscapeElement();
    }

    render(){
        return(
            <div className="node_selected">
                <div style="{height:'400px';width:'400px'}" id="cy"/>
            </div>
        )
    }
}

function mapStateToProps(state){
    return {};
}


export default connect(mapStateToProps,null)(GraphContainer);

render() {
  let cyStyle = {
    height: '1000px',
    width: '1000px',
    margin: '20px 0px'
  };

  return (
    <div>
      <div style={cyStyle} id="cy"/>
    </div>
  );
}

render（）{
设cyStyle={
高度：“1000px”，
宽度：“1000px”，
边距：“20px 0px”
};
返回(
);
}

我还必须将cytoscape.js与react集成，但没有redux，所以写了一篇要点，以备其他人需要

---

这应该行得通。控制台上有什么吗？如果cytoscape上没有默认导出，请导入{cytoscape}。控制台中没有错误。我看到rendercytoscapelement（）中的console.log，所以我猜导入没有问题。当我用您建议的导入替换我的导入时，我得到了一个错误GraphContainer.js？faef:24Uncaught TypeError:无法读取未定义的属性“样式表”，因为这个问题已发布，一个精心设计的react cytoscape.js组件已经可用：我认为container div的style属性应该这样写：OP代码中的问题在以下行：。style属性应该这样写：style={{height:'400px'；width:'400px'}。不需要像您这样的附加变量，因为它是相同的。