Question

我正在尝试构建dropdown-menu并将数组中的数据添加到dropdown-item。我当前的代码没有向我的const Users返回任何内容。如何使用数组将数据添加到dropdown-item？

UserDisplay组件

   const UserDisplay = ({ users }) => {
      const Users = users.map(user => {
        let i = 0;
        <a className="dropdown-item" href="#">
          {user[i]}
        </a>;
        i++;
      });
      return (
        <div className="dropdown-menu" id="users">
          <a className="dropdown-item" href="#">
            Online Users
          </a>
          <div className="dropdown-divider" />
             {Users}
        </div>
      );
    };

父组件ChatLayout

return (
      <div className="chat navbar fixed-bottom">
        <div className="btn-group dropup">
          <button
            type="button"
            className="btn btn-secondary dropdown-toggle"
            data-toggle="dropdown"
            aria-haspopup="true"
            aria-expanded="false"
          >
            Chat
          </button>
          <UserDisplay users={[this.state.users]} />
        </div>
        <ul id="messages">
          <div />
        </ul>
        <form onSubmit={this.onSubmit}>
          <textarea
            name="message"
            placeholder="Enter your message here"
            autoComplete="off"
            type="submit"
            onKeyDown={this.onEnterPress}
            value={this.state.message}
            onChange={this.onChange}
          />
          <input type="submit" className="btn btn-info btn-block mt-4" />
        </form>
      </div>
    );

Answer 1

假设您的父组件以props的形式传递数据数组，则可以将此数组呈现为一个无序列表，那么您的代码应如下所示：

    const ListItens = props =>{
        const itens = props.list.map(item =>{
            return(< li> /* item.data */< /li> ); 
    })  
        return itens;
    }

Answer 2

您不需要定义和迭代i。.map已经在跟踪数组索引。假设users有数据，它应该像这样...

  UserDisplay(users) {
      const Users = users.map((user,i) => {
        return (
            <a className="dropdown-item" key={i} href="#">
              {user}
            </a>)
      });
      return (
        <div className="dropdown-menu" id="users">
          <a className="dropdown-item" href="#">
            Online Users
          </a>
          <div className="dropdown-divider" />
          {Users}
        </div>
      );
  };

工作代码：https://www.codeply.com/go/DnqpGhozra

Answer 3

您正在破坏props对象，并使用户离开它，所以很好。基本上map返回一个数组列表，所以您什么也没有返回。

您需要迭代用户的第一个元素

const Users = users[0].map((user,i) => {
        console.log(user);
        return (
            <a className="dropdown-item" key={i} href="#">
              {user}
            </a>)
      });

或者只是直接传递用户

 <UserDisplay users={this.state.users} />

使用从父组件传递的数组生成下拉菜单

3 个答案: