为什么重新渲染后仍保留样式？

IT技术 reactjs react-hooks styling
2021-05-13 04:12:48

我正在学习 react 并构建了一个简单的程序来生成数组并改变它的颜色。我不明白为什么当我生成新数组时会保留前一个数组的颜色。我认为这是因为当我生成一个新数组时状态发生了变化 react 将重新渲染组件并且颜色将设置回默认值。我错过了什么？

这是我的代码：

import React, { useState, useEffect } from 'react';

const Dummy2 = () => {
    const [arr, setArr] = useState([]);

    useEffect(() => {
        generateArray();
    }, []);

    const generateArray = () => {
        const temp = [];
        for(let i = 1; i < 11; i++) {
            temp.push(i * 2);
        }
        setArr(temp);
    }

    const changeColor = () => {
        const arrayElements = document.getElementsByClassName('array-element');
        for(let i = 0; i < arrayElements.length; i++) {
            arrayElements[i].style.backgroundColor = 'red';
        }
    }

    return (
        <div>
            <div className="array-container">
                {arr.map((value, idx) => (
                    <div className="array-element"
                         key={idx}
                         style={{height: `${value}px`,
                                 weight: `${value}px`,
                                 margin: '1px 1px',
                                 backgroundColor: 'blue'}}
                    ></div>))
                }
            </div>
            <div>
                <button onClick={() => changeColor()}>change-color!</button>
                <button onClick={() => generateArray()}>new-array</button>
            </div>
        </div>
    );
}

export default Dummy2;

编辑：我设法通过添加以下功能来解决这个问题

const resetColors = () => {
        const arrayBars = document.getElementsByClassName('array-element');
        for(let i = 0; i < arrayBars.length; i++) {
            arrayBars[i].style.backgroundColor = 'blue';
        }
    }

每当阵列重置时，我都会调用它。

但我仍然不明白为什么要保留样式。

2个回答

这是错误的做法 - 通常，在react中，所有可以更改的值都应作为状态处理。并且所有影响组件样式的值都应该作为 props 传递给组件 - 作为一般经验法则，你应该避免像getElementByIdand 之类的东西element.style =。而是通过props传递这些信息。

首先，您可以使用useState, 然后setState在单击按钮时处理该颜色。然后可以将颜色值传递到要设置样式的 div 的样式属性中。

const Dummy2 = () => {
    const [arr, setArr] = useState([]);
    const [color, setColor] = useState("blue"); // Initialise color to "blue"

    /** -- snip -- **/

    const changeColor = () => {
        setColor("red"); // Set color here
    }

    return (
          /** -- snip -- **/
                    <div className="array-element"
                         key={idx}
                         style={{height: `${value}px`,
                                 weight: `${value}px`,
                                 margin: '1px 1px',
                                 backgroundColor: color, // pass in color here
                          }}
          /** -- snip -- **/
                <button onClick={() => changeColor()}>change-color!</button>
          /** -- snip -- **/
    );
}

如果您希望每次生成数组时都重置颜色，则可以setColor("<whatever color you want>")在generateArray()函数内部调用。然后每次生成数组时，颜色将重置为该颜色。

至于为什么样式保持不变，那是因为您每次都生成相同的数组。React 足够聪明，知道它不需要重新渲染与上次渲染具有完全相同值的组件/div，因此不会调用重新渲染。

React 组件通常在其状态或props更改时重新渲染。

因此，您应该更改状态以查看更新。

import React, { useState, useEffect } from 'react';

const Dummy2 = () => {
    const [arr, setArr] = useState([]);
    const [color,setColor] = useState("blue");
    useEffect(() => {
        generateArray();
    }, []);

    const generateArray = () => {
        const temp = [];
        for(let i = 1; i < 11; i++) {
            temp.push(i * 2);
        }
        setArr(temp);
    };

    const changeColor = () => {   
         setColor("red");
    };

    return (
        <div>
            <div className="array-container">
                {arr.map((value, idx) => (
                    <div className="array-element"
                         key={idx}
                         style={{height: `${value}px`,
                                 weight: `${value}px`,
                                 margin: '1px 1px',
                                 backgroundColor: ${color}}}
                    ></div>))
                }
            </div>
            <div>
                <button onClick={() => changeColor()}>change-color!</button>
                <button onClick={() => generateArray()}>new-array</button>
            </div>
        </div>
    );
}

export default Dummy2;
其它你可能感兴趣的问题
上一篇react本机数学动作不起作用 下一篇每次击键都会调用 api