时间戳

首页 > 解决方案 > 我的反应表代码有问题吗？我看不到我的桌子

javascript - 我的反应表代码有问题吗？我看不到我的桌子

问题描述

<div class = "sampleTable">




const TableBody = props => { 
    const rows = props.fillTheData.map((row, index) => {
        return (
            <tr key={index}>
                <td>{row.name}</td>
                <td>{row.job}</td>
            </tr>
        );
    });

    return <tbody>{rows}</tbody>;
}

class App extends React.Component {
  render() {
    const character = [
            {
                'name': 'Charlie',
                'job': 'Janitor'
            },
            {
                'name': 'Mac',
                'job': 'Bouncer'
            },
            {
                'name': 'Dee',
                'job': 'Aspring actress'
            },
            {
                'name': 'Dennis',
                'job': 'Bartender'
            }
    ];
    return(

        <Table characterData = {character}/>

    )
  }
}

class Table extends React.Component {
  render(){
    const {characters} = this.props;
    return(
      <table>
        <TableHeader />
        <TableBody fillTheData = {characters} />
      </table>
    )
  }
}

const TableHeader = () => { 
    return (
        <thead>
            <tr>
                <th>Name</th>
                <th>Job</th>
            </tr>
        </thead>
    );
}

ReactDOM.render(<App />, document.getElementById("sampleTable"))

我想在不直接使用 HTML 的情况下创建表格。相反，选择做出反应来完成这项任务是我的目的。我检查了几次，但我仍然不知道代码中发生了什么，因为我看不到表格。

现在，我们有一个很酷的 Table 组件，但是数据是硬编码的。React 的一大亮点是它如何处理数据，它使用属性（称为 props）和状态来处理数据。首先，我们将专注于使用 props 处理数据。

然后让我们将所有数据移动到一个对象数组中，就好像我们引入了一个基于 JSON 的 API。我们必须在我们的 render() 中创建这个数组。

标签： javascripthtmlcssreactjs

解决方案

class App extends React.Component {
    render() {
        const character = [
            {
                'name': 'Charlie',
                'job': 'Janitor'
            },
            {
                'name': 'Mac',
                'job': 'Bouncer'
            },
            {
                'name': 'Dee',
                'job': 'Aspring actress'
            },
            {
                'name': 'Dennis',
                'job': 'Bartender'
            }
        ];
        return (

            <Table characters={character} />  <--- replace the props name with 'characters'

        )
    }
}

您的代码无法正常工作的原因是因为您将一个名为characterDatadown 的道具传递给Table，但在 内部，您正在从Table解构，这将为您提供，因为您从未将名为Component的道具传递给您。charactersthis.propundefinedcharactersTable

推荐阅读