Question

<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）和状态来处理数据。首先，我们将专注于使用道具处理数据。

然后将所有数据移动到对象数组中，就像我们引入基于JSON的API一样。我们必须在render（）中创建此数组。

Answer 1

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'

        )
    }
}

您的代码无法正常工作的原因是，您将characterData传递给了Table，但在Table内部，您正在从{ characters，这将为您提供this.prop，因为您从未将名为undefined的道具传递给characters组件。

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

1 个答案: