时间戳

首页 > 解决方案 > 如何将道具传递给循环内的样式化组件

javascript - 如何将道具传递给循环内的样式化组件

问题描述

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Container } from './styles';

import { MdContentCopy, MdGroup, MdPerson, MdMovie, MdSettings } from 'react-icons/md';

const items = [
    {
        route: '/',
        icon: <MdContentCopy />,
        title: 'Orders',
    },
    {
        route: '/customers',
        icon: <MdGroup />,
        title: 'Customers',
    },
    {
        route: '/movies',
        icon: <MdMovie />,
        title: 'Movies',
    },
    {
        route: '/settings',
        icon: <MdSettings />,
        title: 'Settings',
    },
    {
        route: '/Profile',
        icon: <MdPerson />,
        title: 'Profile',
    },
];

class ItemList extends Component {
    state = {
        active: false,
    };
    render() {
        const { open, history } = this.props;
        const pathName = history.location.pathname;

        return (
            <Container open={open} active={this.state.active}> // PASSING ACTIVE PROPS TO STYLED COMPONENT
                {items.map((item, index) => {
                    if (item.route === pathName) this.setState({ active: true }); // THIS THROWS AN ERROR BECAUSE TOO MANY RE-RENDERS
                    return (
                        <Link to={item.route} key={index}>
                            {item.icon}
                            <span>{item.title}</span>
                        </Link>
                    );
                })}
            </Container>
        );
    }
}

export default ItemList;

我正在尝试将活动道具传递给循环内的样式化组件（容器）。我尝试使用 setState 来触发重新渲染，因为如果我只是分配一个变量（让 active = false 并且如果 if 语句为 true 则 active = true）它不会重新渲染组件并且 active 将始终为 false . 但是循环内的 setState 会进行大量的重新渲染并引发超出深度的错误。关于我如何做到这一点的任何想法？

标签： javascriptreactjsstyled-components

解决方案

在这个用例中不需要设置状态（使用 item.route === pathName 而不是 this.state.active），只需将活动值作为 true 或 false 传递给组件，这里是下面提到的修改类。

但是在这个用例中，匹配一个路由将作为 active=true 传递给容器。

class ItemList extends Component {
render() {
    const { open, history } = this.props;
    const pathName = history.location.pathname;

    const isActive = items.filter(item => item.route === pathName).length > 0;

    return (
        <Container open={open} active={isActive}> // PASSING ACTIVE PROPS TO STYLED COMPONENT
            {items.map((item, index) => {
                return (
                    <Link to={item.route} key={index}>
                        {item.icon}
                        <span>{item.title}</span>
                    </Link>
                );
            })}
        </Container>
    );
}

}

推荐阅读