Question

继承我的代码：

const drops = 500;
const rain = [];
for (let i = 0; i < drops; i++) {
    let rainDrops = '<div class="drop" id="drop' + i + '"></div>';
    let left = Math.floor(Math.random() * (16000 - 0 + 1)) + 1;
    let top = Math.floor(Math.random() * (-1000 - 1400 + 1)) + 1;

}
console.log(rain)


const NavBar = () => (
    <div>
        <section className="rain"
            left={left}
            top={top} >
            {rain}
        </section>
    </div>
);
export default NavBar;

我试图通过随机化JSX函数内部<section>的出现来填充雨点来填充我的页面，然后我将其导出到最后。

当我yarn start时，它会给我的控制台一个语法错误。进一步说明left is undefined和Unexpected use of top

提前致谢。

Answer 1

有很多方法可以让你的代码工作。如果没有深入了解状态和道具概念，就可以更好地理解React。

const drops = 500;
const rainDrops = []; // <-- let's rename this
for (let i = 0; i < drops; i++) {
    let left = Math.floor(Math.random() * (16000 - 0 + 1)) + 1; // Subtract zero?
    let top = Math.floor(Math.random() * (-1000 - 1400 + 1)) + 1;
    rainDrops.push({ left, top }); // <-- Collect every drop
}
console.log(rainDrops); // ok, why not. But let's always add a semicolon


const NavBar = () => (
    <div>
        <section className="rain">
            {rainDrops.map(({ left, top }, index) =>
                <div
                    className="drop"
                    id={'drop' + index}
                    style={{ left: left + 'px', top: top + 'px', }}
                />
            )}
        </section>
    </div>
);
export default NavBar;

如何在JSX函数中创建<div>的实例

1 个答案: