Question

你好，我的问题是有一种方法可以将很多对象保持在反应状态而无需创建很多变量。例如我有一个包含产品的目录，我有（onMouseEnter，onMouseLeave）和一些逻辑，这些逻辑用于采用不同的CSS样式来实现淡入淡出效果，而其他逻辑则在布尔条件下具有保持状态的变量。当我需要5时问题就来了.. 10 .. 100 ..产品我需要为每个对象设置许多变量。如果有人可以告诉您应该采用哪种方法。预先谢谢你。

import React from 'react';
import { Col, Row, Container } from 'react-bootstrap';
import Card from "react-bootstrap/Card";
import CardBody from "reactstrap/es/CardBody";
import CardTitle from "reactstrap/es/CardTitle";
import CardImg from "react-bootstrap/CardImg";
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
import { keyframes } from "styled-components";

import style from './Catalogue1.css';

class Catalogue extends React.Component {

    constructor(props) {
        super(props);
        this.state = {                   <-- here i need many state var's
            dropdownOpen: false,              
            visible: false,                          
            visible1: false,
            cardOn: false,
            cardOn1: false
        }

    }

    componentDidMount() {

    }

    enterMouse = e => {                            <-- need 4 functions 
                                                   for just two objects
        this.setState(prevState => ({
            dropdownOpen: !prevState.dropdownOpen,
            visible: true,
            cardOn: true

        }));
    }

    leaveMouse = e => {
        this.setState(prevState => ({
            dropdownOpen: !prevState.dropdownOpen,
            visible: false,
            cardOn: false
        }));
    }


    enterMouse1 = e => {                            
        this.setState(prevState => ({
            dropdownOpen: !prevState.dropdownOpen,
            visible1: true,
            cardOn1: true

        }));
    }

    leaveMouse1 = e => {
        this.setState(prevState => ({
            dropdownOpen: !prevState.dropdownOpen,
            visible1: false,
            cardOn1: false
        }));
    }

    render() {
        const { filteredItems } = this.state;        
        return (
            <Container className={style.container}>
                <Row>
                    <Col>
                        <div className={style.div1}>         
                            <Card className={this.state.cardOn ? style.cardOn : style.cardOff}  style={{ width: '13rem'}}  onMouseEnter={this.enterMouse} onMouseLeave={this.leaveMouse}>
                                <CardImg variant="top" src="https://i.ibb.co/MDHYTJy/11482459963422.jpg" />
                                <CardBody className={style.cardText}>
                                    <CardTitle>Смартфон GSM XIAOMI MI 8 LITE</CardTitle>
                                    <div className={this.state.visible? style.fadeIn : style.fadeDefaultState} style={{ width: '13rem'}}>
                                        <p>
                                            * foo <br />
                                            * bar
                                        </p>
                                    </div>
                                </CardBody>
                            </Card>
                            <Card className={this.state.cardOn1 ? style.cardOn1 : style.cardOff1}  style={{ width: '13rem'}}  onMouseEnter={this.enterMouse1} onMouseLeave={this.leaveMouse1}>
                                <CardImg variant="top" src="https://i.ibb.co/MDHYTJy/11482459963422.jpg" />
                                <CardBody className={style.cardText}>
                                    <CardTitle>Смартфон GSM XIAOMI MI 8 LITE</CardTitle>
                                    <div className={this.state.visible1? style.fadeIn : style.fadeDefaultState} style={{ width: '13rem'}}>
                                        <p>
                                            * foo <br />
                                            * bar
                                        </p>
                                    </div>
                                </CardBody>
                            </Card>
                        </div>
                    </Col>
                </Row>


            </Container>
        );
    }
}

export default Catalogue

Answer 1

您应该在Card组件内移动卡的状态，并在Catalogue中使用不带状态的卡。

Answer 2

是的，保留数组值而不是为对象定义单个键是有意义的。我看到您正在尝试使用卡片做某事，因此这应该特别相关。

考虑以下代码：

def generate_combos(a, b):
    yield from generate_combos_rec(a, b, 0, 0, [], True)

def generate_combos_rec(a, b, i, j, current, all_none):
    if i >= len(a):
        if not all_none:
            yield list(current)
    else:
        while j < len(b) and a[i] >= b[j]:
            j += 1
        for j2 in range(j, len(b)):
            current.append((a[i], b[j2]))
            yield from generate_combos_rec(a, b, i + 1, j2 + 1, current, False)
            current.pop()
        current.append((a[i], None))
        yield from generate_combos_rec(a, b, i + 1, j, current, all_none)
        current.pop()

因此，通过执行类似的操作，您可以将所有Cards保持在一起。这完全取决于您如何设置卡阵列，拥有ID会使您的生活变得更加轻松。然后，您需要计划事件处理程序如何通过使用这些ID来更新所需的卡片

有没有一种方法可以使很多对象始终保持反应状态

2 个答案: