Реагировать на HTML таблицу - PullRequest
Новая
       6

Реагировать на HTML таблицу

0 голосов
/ 17 мая 2018

В настоящее время я пытаюсь заставить работать таблицу HTML в React, но что-то идет не так, как должно. Я получаю вывод рендеринга, но с ошибкой: <tr> cannot appear as a child of <div>.

Я пытался найти его в Интернете, но техника, которую я использую, кажется, используется не так часто, поэтому, если я делаю это неправильно, пожалуйста, просветите меня.
Заранее спасибо! 

getTableContent = (arr) => {
    let result = [];
    arr.forEach(function (item, i) {
        result.push(
            <table key={item.productType}>
                <thead>{item.productType}</thead>
                <tbody>
                    {item.contents.forEach(function (nextItem, j) {
                        result.push(
                            <tr key={nextItem.type}>
                                <td>{nextItem.type}</td>
                                <td>{nextItem.count}</td>
                            </tr>
                        )
                    })}
                </tbody>
            </table>
            );
    });
    return result;
};

render() {
    return (
            <div>{this.getTableContent(productSpecification)}</div>
    );
}

Данные выглядят следующим образом: 

const productSpecification = [
    {
        productType: "abc", contents: [
            {type: "abc", count: 231},
            {type: "abc", count: 56},
            {type: "abc", count: 54},
            {type: "abc", count: 544},
            {type: "abc", count: 54},
            {type: "abc", count: 564},
            {type: "abc", count: 4},
            {type: "abc", count: 4564},
            {type: "abc", count: 4531},
            {type: "abc", count: 234},
            {type: "abc", count: 57},
            {type: "abc", count: 7}
        ]
    }
];

Ответы [ 3 ]

0 голосов
/ 17 мая 2018

Вам нужно добавить открывающие и закрывающие теги <tbody>, например: 

<table>
<tbody>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
...
</tbody>
</table>
0 голосов
/ 17 мая 2018

вместо нажатия на array вы можете попробовать вернуть jsx из function Попробуйте это. 

getTableContent = (arr) => {
    const iterateItem = (item) => {
       return item.map(function (nextItem, j) {
         return (
            <tr key={nextItem.type}>
               <td>{nextItem.type}</td>
               <td>{nextItem.count}</td>
            </tr>
         );
       })
    }
    return arr.map(function (item, i) {
        return (
            <table key={item.productType}>
            <thead>{item.productType}</thead>
                <tbody>
                    {iterateItem(item.contents)}
                </tbody>
            </table>
        );
    });
};

render() {
    return (
            <div>{this.getTableContent(productSpecification)}</div>
    );
}
0 голосов
/ 17 мая 2018

Это должно вернуть tr строк: 

{item.contents.forEach(function (nextItem, j) {
    result.push(
        <tr key={nextItem.type}>
            <td>{nextItem.type}</td>
            <td>{nextItem.count}</td>
        </tr>
    )
})}

Но на самом деле он изменяет переменную result, помещая в нее tr вместо их возврата. Это приводит к тому, что переменная result заполняется как table с, так и tr с. Вы должны вернуть tr s в map, а не выдвигать их к result в forEach: 

{item.contents.map(function (nextItem, j) {
    return (
        <tr key={nextItem.type}>
            <td>{nextItem.type}</td>
            <td>{nextItem.count}</td>
        </tr>
    )
})}
...