Question

我正在尝试在React中构建一个可重用的表组件，但是到目前为止，渲染我的<td>时还没有运气。

我将所需的道具从TableList组件传递到TableRow组件，如下所示：

    const TableList = props => {
    const { listData, listHeaders } = props;

    return (
        <table className="table table-striped">
            <thead>
                <tr>
                    {listHeaders.map(header => (
                        <th scrope="col" key={header}>
                            {header}
                        </th>
                    ))}
                    <th scope="col" />
                </tr>
            </thead>
            <tbody>
                {listData.map(data => (
                    <TableRow
                        key={data.id}
                        data={data}
                        handleClick={props.handleClick}
                    />
                ))}
            </tbody>
        </table>
    );
};

，并且在TableRow中，我可以很好地遍历JSON对象，但是我的元素没有呈现。我没有收到任何错误，但是我在DOM中的<tr>元素中没有子元素。这是我的TableRows组件：

    const TableRow = props => {
    const { data } = props;

    return (
        <tr>
            {Object.keys(data).forEach(function(item) {
                console.log(data[item]); // This prints out my JSON objects just fine
                <td key={item}>data[item]</td>; // But this element isn't rendering in the DOM
            })}
        </tr>
    );
};

我曾尝试将我的JSON对象分配给用于.map()导航的数组，但这也得出了相同的结果。我也尝试过将<tbody>和<tr>之类的各种元素在组件树中上移或下移。

Answer 1

您必须从循环中返回JSX元素。喜欢

return (
  <tr>
    {Object.keys(data).map(function(item) {
      console.log(data[item]); // This prints out my JSON objects just fine
      return <td key={item}>data[item]</td>; // But this element isn't rendering in the DOM
    })}
  </tr>
);

Array#forEach返回undefined。目前，您正在渲染undefined。您可以使用Array#map来转换输入数组并返回一个数组。

Answer 2

您需要修复两件事

您需要用Array.prototype.map()更改forEach()，因为 forEach()方式会返回undefined 。
您应该使用()而不是{}。如果要使用{}，请在函数内部jsx之前使用return

这是代码。

<tr>
   {Object.keys(data).map((item) => (
         <td key={item}>data[item]</td>; // But this element isn't rendering in the DOM
    )}
</tr>

Answer 3

const TableRow = props => {
const { data } = props;

return (
    <tr>
        {Object.keys(data).forEach(function(item) {
            console.log(data[item]); // This prints out my JSON objects just fine

            <td key={item}>data[item]</td>; // But this element isn't rendering in the DOM
        })}
    </tr>
    );
};

Object.keys（data）.forEach（）不在这里，它不会返回任何内容。您应该执行一个Object.keys（data）.map，并为每个键返回一个jsx。

const TableRow = props => {
const { data } = props;

    return (
        <tr>
            {Object.keys(data).map(function(item) {
                return <td key={item}>data[item]</td>; // But this element isn't rendering in the DOM
            })}
        </tr>
    );
};

应该很好地工作。

遍历JSON和呈现表元素不会产生任何结果

3 个答案: