React动态表未在Knowckout项目中显示

Question

我已经能够在我的durandal / knockout应用程序中成功集成react组件。我设法在图中显示数据，但似乎无法在我的反应表中显示数据。我得到以下JSON动态数据：

{
"Level": 1,
"Label": "Level 1",
"Qualification": "≥ 100 points",
"BBBEERecognitionLevel": "135%",
"LevelMet": false,
"Color": "whitesmoke"
  },

现在数据显示在控制台中，所以我知道我正在获取Json数据，这是我的淘汰赛代码：index.html

                        <bee-data-Table data-bind="attr: { data: ReactBeeLevelTable }" />

index.js

    self.ReactBeeLevelTable = ko.observable();
        var length = levels.length;
        for (var i = 0; i < length; i++) {
            var levelItem = levels[i];

            levelItem.LevelMet = levelItem.Level === recognisedLevel;

            levelItem.Color = levelItem.LevelMet ? reveresedColours[i].color : defaultTableRowColor;

            var levelCompare = getCompareValueFromLevel(levelItem.Level);
            var recognisedLevelCompare = getCompareValueFromLevel(recognisedLevel);

            if (levelCompare <= recognisedLevelCompare) {
                var chartIndex = ConvertLevelToIndex(levelItem.Level);
                dataset.backgroundColor[chartIndex] = defaultChartBackgroundColor;
            }
        }

        self.ReactBeeLevelTable(JSON.stringify(levels));

这是我的反应datatable.js

    import React, { Component } from 'react';
import { Table } from '@react-pakistan/react-commons-collection/table';


const RenderRow = (props) =>{
    return props.keys.map((key, index)=>{
    return <td key={props.data[key]}>{props.data[key]}</td>
    })
   }



export class Example extends Component {
    constructor(props) {
        super(props)
        this.getHeader = this.getHeader.bind(this);
        this.getRow= this.getRow.bind(this);
        this.getKeys=this.getKeys.bind(this);
    }
    getKeys = function() {

        return Object.keys(this.props.data[0]);

    }
    getHeader = function() {
        var keys = this.getKeys();
        return keys.map((key,index)=> {
        return <th key={key}>{key.toUpperCase()}</th>
        })

    }
    getRow = function () {
    var items = this.props.data;
    var keys = this.getKeys();
    return items.map((row,index) => {
    return <tr key={index}><RenderRow key={index} data={row} keys={keys}/></tr>
    })

    }

    render () {
        return (
            <div>
            <Table>
                <thead>
                    <tr>
                        <th>B-BBEE Recognition Level</th>
                    </tr>
                    <tr>
                <th>{this.getHeader()}</th>

            </tr>
                </thead>
                <tbody>
                <tr> {this.getRow()} </tr>
                </tbody>


            </Table>
            </div>
        );
    }

}

这是我的Datatable.Story.js

import React from 'react';
import { storiesOf } from '@storybook/react';
import { Example } from './DataTable';


const TableElements = [{
    "Level": 1,
    "Label": "Level 1",
    "Qualification": "≥ 100 points",
    "BBBEERecognitionLevel": "135%",
    "LevelMet": false,
    "Color": "whitesmoke"
  }]

storiesOf('Table Examples', module)
.add('Priority Element', () => (
  <Example data={TableElements} title={"Points Available/Earned"}/>)
);  

这是我的索引，js

import { register } from 'web-react-components';
register(Example,'bee-data-Table',['data'],{}, { useShadowDOM: false });

因此表显示了我的react项目中的硬编码数据，但是当我尝试在durandal / knockout项目中使用动态数据切换出数据时，它似乎没有显示

Answer 1

[经过一番调查，我发现当您register一个组件时，它区分大小写，所以如果您查看我的index.js文件，我会看到这行代码：

register(Example,'bee-data-Table',['data'],{}, { useShadowDOM: false });

这是不正确的，注册组件的正确方法如下：

register(Example,'bee-data-table',['data'],{}, { useShadowDOM: false });