怎样才能把排列的元素一一取出来？在 Reactjs 中 div

Question

这是用 React-Hooks 制作的我想把编曲的元素一一展示出来

我想在整体结果中表现出来。（结果，在底部。）也许我想要的是 'reduce this lot of code'.

我应该使用什么？使用上下文？使用减速器？或者有更简单的方法吗？我是初学者。让我知道。硕士

const Container = () => {
      const compoFunc = () => {
        const friendsContainer = {
          title: ["HBD", "Friends", "Chennel"],
          content: [
            "your friend's BD",
            "Meet new friends",
            "My chennel",
          ],
          num: [5, 100, 23],
        };
        return (
          <>
            <FriendsMain>
             
                <div>{friendsContainer.title}</div>
             
                <FriendsFront>
                  <div>{friendsContainer.content}</div>
                </FriendsFront>

                <FriendsRear>{friendsContainer.num}</FriendsRear>

            </FriendsMain>
          </>
        );
      };
    
      return (
        <div>
          <FriendContainer>
            <div> // I want to put friendsContainer's arrangement one by one here... By turns
              {compoFunc()}<-- HBD, your friend's BD, 5
              {compoFunc()}<-- Friends, Meet new friends, 100
              {compoFunc()}<-- Chennel, My chennel, 23
            </div>
          </FriendContainer>
        </div>
      );
    };
    
    export default Container;

这是我想要的整体结果。

              <FriendsMain>
             
                <div>HBD</div> //title[0]
             
                <FriendsFront>
                  <div>your friend's BD</div> //content[0]
                </FriendsFront>

                <FriendsRear>5</FriendsRear> //num[0]

            </FriendsMain>
            <FriendsMain>
             
                <div>Friends</div> //title[1]
             
                <FriendsFront>
                  <div>Meet new friends</div> // content[1]
                </FriendsFront>

                <FriendsRear>100</FriendsRear> //num[1]

            </FriendsMain>
            <FriendsMain>
             
                <div>Channel</div> //title[2]
             
                <FriendsFront>
                  <div>My channel</div> //content[2]
                </FriendsFront>

                <FriendsRear>23</FriendsRear> //num[2]

            </FriendsMain>

Answer 1

将 friendsContainer 移动到状态或某些 Container 组件级变量。
将数据映射到 JSX

示例代码：

const Container = () => {
  const [data] = useState({
    title: ["HBD", "Friends", "Chennel"],
    content: ["your friend's BD", "Meet new friends", "My chennel"],
    num: [5, 100, 23]
  });

  return (
    <div>
      <FriendContainer>
        <div>
          {Object.values(data.title).map((title, i) => (
            <FriendsMain>
              <div>{title}</div>
              <FriendsFront>
                <div>{data.content[i]}</div>
              </FriendsFront>

              <FriendsRear>{data.num[i]}</FriendsRear>
            </FriendsMain>
          ))}
        </div>
      </FriendContainer>
    </div>
  );
};

怎样才能把排列的元素一一取出来？在 Reactjs 中 div

How can I take out the elements of the arrangement one by one? within div in Reactjs

refactoring

reactjs

react-hooks

use-reducer

use-context