集成React的时候报错TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

[wan766405890]

import React, { Component } from 'react'; import ReactDOM from "react-dom"; import Spreadsheet from "x-data-spreadsheet"; import zhCN from 'x-data-spreadsheet/src/locale/zh-cn'; import NProgress from 'nprogress' import 'nprogress/nprogress.css' import $ from 'jquery'; const data = { freeze: "B3", styles: [ { bgcolor: "#f4f5f8", textwrap: true, color: "#900b09", border: { top: ["thin", "#0366d6"], bottom: ["thin", "#0366d6"], right: ["thin", "#0366d6"], left: ["thin", "#0366d6"] } } ], merges: ["C3:D4"], rows: { 1: { cells: { 0: { text: "testingtesttestetst" }, 2: { text: "testing" } } }, 2: { cells: { 0: { text: "render", style: 0 }, 1: { text: "Hello" }, 2: { text: "haha", merge: [1, 1] } } }, 8: { cells: { 8: { text: "border test", style: 0 } } } } } class XSpreadSheetDemo extends Component { componentWillMount = () => { NProgress.start(); }; componentDidMount = () => { Spreadsheet.locale('zh-cn', zhCN); const myCompDOM = this.refs.myComp; const s = new Spreadsheet(myCompDOM) .loadData(data) // load data .change(data => { console.log(data); // save data to db });

    // data validation
    s.validate()
    NProgress.done();

  };

render(){
    return (
      <div ref='myComp' id="x-spreadsheet-demo" />
    );
}

} export default XSpreadSheetDemo;

[myliang]

https://github.com/myliang/x-spreadsheet/issues/200

[wan766405890]

@myliang 还是报错

[myliang]

自己debug看看，我不懂react

[suntaoTom]

你需要在element.js里改： child(arg) { if(arg==undefined){ arg='sheet1' } ... }

[alexsegura]

There seems to be a BC break in version v1.0.33

I think it was introduced in 488e5ed880109ba52826730b23d0085bde170133 @myliang

Convert data into an array (not an object), and it works 😉

[alexsegura]

I'm afraid the example here doesn't work anymore

[alexsegura]

See #279

[wan766405890]

import React, { Component } from 'react'; import ReactDOM from "react-dom"; import Spreadsheet from "x-data-spreadsheet"; import 'x-data-spreadsheet/dist/xspreadsheet.css'; import NProgress from 'nprogress' import 'nprogress/nprogress.css' //import zhCN from 'x-data-spreadsheet/dist/locale/zh-cn'; class XSpreadSheetDemo extends Component { componentWillMount = () => { NProgress.start(); }; componentDidMount = () => { //Spreadsheet.locale('zh-cn', zhCN); //var p=document.createElement('p'); //var spreadSheetDom=$("#x-spreadsheet-demo"); //var container2 = document.querySelector('#x-spreadsheet-demo') //var p11 = container2.appendChild(p) //console.log(spreadSheetDom[0]); //const myCompDOM = this.refs.myCompgetElementById; // 获取到的是的实例myComp //const myCompDOM=document.getElementById('x-spreadsheet-demo'); //console.log(myCompDOM); //const dom = ReactDOM.findDOMNode(myCompDOM); // 获取到实例对应的DOM节点 //console.log(typeof myCompDOM); // 输出 "true" const s=new Spreadsheet("#x-spreadsheet-demo", {showToolbar: true, showGrid: true}).loadData([{ name: 'sheet-test-1', freeze: 'B3', styles: [ { bgcolor: '#f4f5f8', textwrap: true, color: '#900b09', border: { top: ['thin', '#0366d6'], bottom: ['thin', '#0366d6'], right: ['thin', '#0366d6'], left: ['thin', '#0366d6'], }, }, ], merges: [ 'C3:D4', ], rows: { 1: { cells: { 0: { text: 'testingtesttestetst' }, 2: { text: 'testing' }, }, }, 2: { cells: { 0: { text: 'render', style: 0 }, 1: { text: 'Hello' }, 2: { text: 'haha', merge: [1, 1] }, } }, 8: { cells: { 8: { text: 'border test', style: 0 }, } } }, }, { name: 'sheet-test' }]); // const s = new Spreadsheet(myCompDOM) // .loadData(datajson) // load data // .change(data => { // console.log(data); // // save data to db // });

    // // data validation
    s.validate()
    NProgress.done();

  };

render(){
    // Spreadsheet.locale('zh-cn', zhCN);
    // console.log(document.getElementById("x-spreadsheet-demo"));
    // new Spreadsheet(document.getElementById("x-spreadsheet-demo"))
    //   .loadData({}) // load data
    //   .change(data => {
    //    console.log(data);
    // });
    return (
      <div ref='myComp' id="x-spreadsheet-demo" />
    );
}

} export default XSpreadSheetDemo;

可以了,但是本地化不行