React Dynamic Table 未在 Knockout 项目中显示

Question

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

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

现在数据显示在我的控制台中，所以我知道我正在获取 Json 数据，这是我的 Knockout 代码： 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 });

所以 Table 在我的 React 项目中显示了硬编码数据，但是当我尝试在我的 durandal/knockout 项目中用动态数据切换数据时，它似乎没有显示

Answer 1

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

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

这是错误的，正确的组件注册方式是这样的：

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

React Dynamic Table 未在 Knockout 项目中显示

React Dynamic Table not showing in Knowckout project

reactjs

knockout.js

durandal

storybook