我已经成功地在我的durandal/knockout应用程序中集成了react组件。我已经设法在图形中显示数据，但似乎无法在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));

这是我的react数据表. 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>
        );
    }

}

这是我的数据表. 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项目中使用动态数据切换数据时，它似乎没有显示