Reactjs 反应-将组件用作<；tr>；要一张桌子

我是react新手，我正在使用react创建仪表板。这就是我从纯

html

table中得到的：

这就是我在表中传递组件时得到的结果。

User.js

中的所有数据都返回一列，而不是4列

User.js

function User(props){
    return (

        <tr>    
            <td>{props.email}</td>
            <td>{props.registration}</td>
            <td>{props.status}</td>
            <td>...</td>
        </tr>
    )
}

class Dashboard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [
        { 
          email: "pierre-alexandre@gmail.com",
          registration: "2020-10-25",
          status: "active"
        },
        [...]
      ],
      searchEmail: "",
    };
  }

  render() {
    let filteredUsers = this.state.users.filter((user) => {
      return user.email
        .toLowerCase()
        .includes(this.state.searchEmail.toLowerCase());
    });
    return (
      <div>
        [...]
            <div class="dashboard-content">
              <table>
                <tr>
                  <th>Email</th>
                  <th>Registration Date</th>
                  <th>Status</th>
                  <th>Other</th>
                </tr>
                <UserList filteredUsers={filteredUsers} />
              </table>
          [...]

function UserList (props) {
    let users = props.filteredUsers.map((user, i)=> {
        return <User key={i} email={user.email} registration={user.registration} status={user.status}/>
    })
    if(users.length < 1){
        return <div>No users found. {props.placeholder}
        Make sure that the email is spelled and formatted correctly</div>
    }

    return <div>
        {users}
    </div>
}

export default UserList

功能用户（道具）{
返回(
{props.email}
{props.registration}
{props.status}
...
)
}

Dashboard.js

function User(props){
    return (

        <tr>    
            <td>{props.email}</td>
            <td>{props.registration}</td>
            <td>{props.status}</td>
            <td>...</td>
        </tr>
    )
}

class Dashboard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [
        { 
          email: "pierre-alexandre@gmail.com",
          registration: "2020-10-25",
          status: "active"
        },
        [...]
      ],
      searchEmail: "",
    };
  }

  render() {
    let filteredUsers = this.state.users.filter((user) => {
      return user.email
        .toLowerCase()
        .includes(this.state.searchEmail.toLowerCase());
    });
    return (
      <div>
        [...]
            <div class="dashboard-content">
              <table>
                <tr>
                  <th>Email</th>
                  <th>Registration Date</th>
                  <th>Status</th>
                  <th>Other</th>
                </tr>
                <UserList filteredUsers={filteredUsers} />
              </table>
          [...]

function UserList (props) {
    let users = props.filteredUsers.map((user, i)=> {
        return <User key={i} email={user.email} registration={user.registration} status={user.status}/>
    })
    if(users.length < 1){
        return <div>No users found. {props.placeholder}
        Make sure that the email is spelled and formatted correctly</div>
    }

    return <div>
        {users}
    </div>
}

export default UserList

类仪表板扩展组件{
建造师（道具）{
超级（道具）；
此.state={
用户：[
{ 
电子邮件：“皮埃尔-alexandre@gmail.com",
注册：“2020-10-25”，
状态：“活动”
},
[...]
],
搜索电子邮件：“，
};
}
render（）{
让filteredUsers=this.state.users.filter（（用户）=>{
返回user.email
.toLowerCase（）
.includes（this.state.searchEmail.toLowerCase（））；
});
返回(
[...]
电子邮件
注册日期
地位
其他
[...]

UserList.js

function User(props){
    return (

        <tr>    
            <td>{props.email}</td>
            <td>{props.registration}</td>
            <td>{props.status}</td>
            <td>...</td>
        </tr>
    )
}

class Dashboard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [
        { 
          email: "pierre-alexandre@gmail.com",
          registration: "2020-10-25",
          status: "active"
        },
        [...]
      ],
      searchEmail: "",
    };
  }

  render() {
    let filteredUsers = this.state.users.filter((user) => {
      return user.email
        .toLowerCase()
        .includes(this.state.searchEmail.toLowerCase());
    });
    return (
      <div>
        [...]
            <div class="dashboard-content">
              <table>
                <tr>
                  <th>Email</th>
                  <th>Registration Date</th>
                  <th>Status</th>
                  <th>Other</th>
                </tr>
                <UserList filteredUsers={filteredUsers} />
              </table>
          [...]

function UserList (props) {
    let users = props.filteredUsers.map((user, i)=> {
        return <User key={i} email={user.email} registration={user.registration} status={user.status}/>
    })
    if(users.length < 1){
        return <div>No users found. {props.placeholder}
        Make sure that the email is spelled and formatted correctly</div>
    }

    return <div>
        {users}
    </div>
}

export default UserList

函数用户列表（道具）{
让用户=props.filteredUsers.map（（用户，i）=>{
返回
})
if（users.length<1）{
返回未找到任何用户。{props.placeholder}
确保电子邮件拼写和格式正确
}
返回
{用户}
}
导出默认用户列表

更新：我尝试了kboul解决方案（注释），但它不起作用

---

忽略我在评论中写的内容。这是一个错误的猜测。我认为您可以简化它。此外，如果您的数据长度为0，您可以在表中显示一条消息，以便在控制台中获得不同类型的警告/错误

在我看来，您不需要

用户列表

。您只需要

用户

您可以使用以下代码实现所需：

<div className="dashboard-content">
        {filteredUsers.length > 0 ? (
          <table>
            <tbody>
              <tr>
                <td>Email</td>
                <td>Registration Date</td>
                <td>Status</td>
                <td>Other</td>
              </tr>
              {filteredUsers.map((user, i) => {
                return <User key={i} user={user} />;
              })}
            </tbody>
          </table>
        ) : (
          <div>
            No users found. Make sure that the email is spelled and formatted
            correctly
          </div>
        )}
      </div>

---

检查您的DOM。看起来您插入了一个

div

。正确！但在我的

User.js

上，我返回的是一个

而不是一个div，我如何修复它？每个元素使用一行

tr

。

{props.email}{props.registration}…

继续…现在您将所有内容都放在一行。不起作用。我无法编译“JSX表达式必须有一个父元素”在开头使用

包装

tr

s