React Dynamic Table 未在 Knockout 项目中显示

Posted 2023-03-27

【中文标题】React Dynamic Table 未在 Knockout 项目中显示

【英文标题】：React Dynamic Table not showing in Knowckout project

【发布时间】：2020-08-28 11:58:53

【问题描述】：

我已经能够成功地将反应组件集成到我的 durandal/knockout 应用程序中。我已经设法在图表中显示数据，但我似乎无法在我的反应表中显示数据。我得到以下 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));

这是我的 react 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 );

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

【参考方案1】：

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

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

哪个不正确，注册组件的正确方法是这样的：

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