无法将 HTML JS 转换为 JSX (ReactJS)

问题描述 投票：0回答：2

我正在尝试根据它们在列表中的位置映射框并相应地附加它们的类 但我无法实现我想要实现的目标。这些框没有显示。我没有明白我的代码有什么问题。有人可以帮我解决这个问题吗？ 这是我的 React JSX 代码：

import React from 'react'

const Footer = () => {
    const list = [0, 1, 2, 3, 41, 42, 43, 44, 82, 83, 123, 124, 125, 126, 164, 165, 166, 167, 205, 206, 246, 247, 287, 288, 5, 6, 46, 47, 87, 88, 128, 129, 169, 170, 210, 211, 251, 252, 292, 293, 8, 9, 14, 15, 49, 50, 51, 90, 91, 92, 131, 132, 133, 134, 172, 173, 213, 214, 254, 255, 295, 296, 175, 176, 217, 177, 218, 259, 55, 56, 96, 97, 137, 138, 178, 179, 219, 220, 260, 261, 217, 218, 259, 260, 261, 301, 302, 17, 18, 19, 58, 59, 60, 61, 99, 100, 102, 103, 140, 141, 144, 181, 182, 185, 222, 223, 225, 226, 263, 264, 265, 266, 304, 305, 306, 24, 25, 65, 66, 67, 106, 107, 108, 147, 148, 149, 150, 188, 189, 229, 230, 270, 271, 311, 312, 67, 108, 149, 150, 191, 232, 192, 233, 274, 234, 275, 316, 194, 235, 276, 154, 195, 236, 73, 114, 155, 33, 34, 74, 75, 115, 116, 156, 157, 197, 198, 238, 239, 279, 280, 320, 321, 36, 37, 38, 39, 77, 78, 79, 80, 118, 119, 159, 160, 161, 162, 200, 201, 202, 203, 241, 242, 282, 283, 284, 285, 323, 324, 325, 326,
    ];

    const array = new Array(365);

    return (
        <div id="footer">
            <div className="githubChart">
                <div className="dates">
                    <span>Jan</span>
                    <span>Feb</span>
                    <span>Mar</span>
                    <span>Apr</span>
                    <span>May</span>
                    <span>Jun</span>
                    <span>Jul</span>
                    <span>Aug</span>
                    <span>Sep</span>
                    <span>Oct</span>
                    <span>Nov</span>
                    <span>Dec</span>
                </div>
                <div className="boxContainer">
                    {array.map((index) =>
                        <div className={list.includes(index) ? "box active" : "box"}></div>
                    )}
                </div>
            </div>
        </div>
    )
}

export default Footer

样式.scss

#footer {
    background-color: black;
    height:80vh;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
}
.dates {
    padding: 10px;
    color: #555;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
}
.githubChart {
    width: 820px;
    text-align: center;
}

.boxContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
} 


.box {
    width: 15px;
    height: 15px;
    background-color: #171c25;
    border-radius: 2px;
    cursor: pointer;
    transition: 3s all ease;
}
.active:nth-child(4n) {
    background-color: #195b2c;
}

我最初能够获得所需输出的 javascript 代码如下：

const boxContainer = document.querySelector(".boxContainer");

const list = [0, 1, 2, 3, 41, 42, 43, 44, 82, 83, 123, 124, 125, 126, 164, 165, 166, 167, 205, 206, 246, 247, 287, 288, 5, 6, 46, 47, 87, 88, 128, 129, 169, 170, 210, 211, 251, 252, 292, 293, 8, 9, 14, 15, 49, 50, 51, 90, 91, 92, 131, 132, 133, 134, 172, 173, 213, 214, 254, 255, 295, 296, 175, 176, 217, 177, 218, 259, 55, 56, 96, 97, 137, 138, 178, 179, 219, 220, 260, 261, 217, 218, 259, 260, 261, 301, 302, 17, 18, 19, 58, 59, 60, 61, 99, 100, 102, 103, 140, 141, 144, 181, 182, 185, 222, 223, 225, 226, 263, 264, 265, 266, 304, 305, 306, 24, 25, 65, 66, 67, 106, 107, 108, 147, 148, 149, 150, 188, 189, 229, 230, 270, 271, 311, 312, 67, 108, 149, 150, 191, 232, 192, 233, 274, 234, 275, 316, 194, 235, 276, 154, 195, 236, 73, 114, 155, 33, 34, 74, 75, 115, 116, 156, 157, 197, 198, 238, 239, 279, 280, 320, 321, 36, 37, 38, 39, 77, 78, 79, 80, 118, 119, 159, 160, 161, 162, 200, 201, 202, 203, 241, 242, 282, 283, 284, 285, 323, 324, 325, 326,
];
for (let i = 0; i < 365; i++) {

    const el = document.createElement("div");
    el.classList = list.includes(i)?"box active":"box"
    boxContainer.appendChild(el)
}
reactjs dom react-hooks dom-events
2个回答
0
投票

我还没有找到正确的引用，但是 

new Array(365)
本身创建了一个数组，其中没有任何内容并且不能被迭代，所以对 
.map()
的调用没有做任何事情。

如果你不关心数组中的内容，你可以用零填充它，例如：

const array = new Array(365).fill(0);

或者如果您希望数组是其自身索引值的序列：

const array = [...Array(365).keys()];
0
投票

当你声明数组变量时，你所做的只是初始化一个长度为 365 的数组。元素将是未定义的。 这就是您的盒子不可见的原因。

你需要做的是映射并用数字形式 1 到 365 填充它。 这是更新后的代码：

const Footer = () => {
    const list = [0, 1, 2, 3, 41, 42, 43, 44, 82, 83, 123, 124, 125, 126, 164, 165, 166, 167, 205, 206, 246, 247, 287, 288, 5, 6, 46, 47, 87, 88, 128, 129, 169, 170, 210, 211, 251, 252, 292, 293, 8, 9, 14, 15, 49, 50, 51, 90, 91, 92, 131, 132, 133, 134, 172, 173, 213, 214, 254, 255, 295, 296, 175, 176, 217, 177, 218, 259, 55, 56, 96, 97, 137, 138, 178, 179, 219, 220, 260, 261, 217, 218, 259, 260, 261, 301, 302, 17, 18, 19, 58, 59, 60, 61, 99, 100, 102, 103, 140, 141, 144, 181, 182, 185, 222, 223, 225, 226, 263, 264, 265, 266, 304, 305, 306, 24, 25, 65, 66, 67, 106, 107, 108, 147, 148, 149, 150, 188, 189, 229, 230, 270, 271, 311, 312, 67, 108, 149, 150, 191, 232, 192, 233, 274, 234, 275, 316, 194, 235, 276, 154, 195, 236, 73, 114, 155, 33, 34, 74, 75, 115, 116, 156, 157, 197, 198, 238, 239, 279, 280, 320, 321, 36, 37, 38, 39, 77, 78, 79, 80, 118, 119, 159, 160, 161, 162, 200, 201, 202, 203, 241, 242, 282, 283, 284, 285, 323, 324, 325, 326,
    ];

    const array = new Array(365).fill().map((_, index) => index + 1);

    return (
        <div id="footer">
            <div className="githubChart">
                <div className="dates">
                    <span>Jan</span>
                    <span>Feb</span>
                    <span>Mar</span>
                    <span>Apr</span>
                    <span>May</span>
                    <span>Jun</span>
                    <span>Jul</span>
                    <span>Aug</span>
                    <span>Sep</span>
                    <span>Oct</span>
                    <span>Nov</span>
                    <span>Dec</span>
                </div>
                <div className="boxContainer">
                    {array.map((index) =>
                        <div className={list.includes(index) ? "box active" : "box"} key={index}></div>
                    )}
                </div>
            </div>
        </div>
    )
}

PS：需要在render方法中map函数的return语句里面的元素加上

key
属性，否则react会报warning

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.