时间戳

首页 > 解决方案 > 单击样式组件（地图功能）更改css

javascript - 单击样式组件（地图功能）更改css

问题描述

我正在尝试创建一个按钮来更改 Click 上的组件 (Card.js) 的 css，但我无法做到这一点，因为我必须为 Tab 使用地图功能。

这就是代码。

Card.js 组件：

const Cardbox = styled.div`
...
`

const Cards = styled.div`
    width: 150px;
    height: 220px;
    background: url(${props => props.bg}) no-repeat top center;
`

const Name = styled.h3`
...
`

const Role = styled.p`
...
`

const Card = props => (
  <Link to={props.link}>
    <Cardbox>
      <Cards bg={require(`./../images/Cards/${props.title}_Card.jpg`)}/>
      <div>
        <Name>{props.title}</Name>
        <Role>{props.text}</Role>
      </div>
    </Cardbox>
  </Link>
)

export default Card

Tab.js 组件（我从常量文件中获取数据）：

    class Tabs extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                ...
            }
        }
        ...
        makeHeroCard = (hero, index) => (
            <Card
                title={hero.name}
                text={hero.type.join(', ')}
                image={
                    require(`./../images/Cards/${hero.name}_Card.jpg`)
                }
                link={hero.name}
                key={index}
            />
        )

        render() {
            ...
            return (
                <div>
                    <button>Click here and change css</button>
                    <AppBar>
                        <Tabs>
                            <Tab label="Item One"/>
                            <Tab label="Item Two"/>
                            <Tab label="Item Three"/>
                        </Tabs>
                    </AppBar>
                    {value === 0 && (
                        <TabContainer>
                            <div className="GroupScroll">
                                <div className="Group">
                                    {heroCards.map((hero, index) => this.makeHeroCard(hero, index))}
                                </div>
                            </div>
                        </TabContainer>
                    )}
                    {value === 1 && (
                        <TabContainer>
                            <div className="GroupScroll">
                                <div className="Group">
                                    {heroCards
                                        .filter(hero => hero.type.includes('TANK'))
                                        .map((hero, index) => this.makeHeroCard(hero, index))
                                    }
                                </div>
                            </div>
                        </TabContainer>
                    )}
                </div>
            )
        }
    }

    export default Tabs

点击按钮我想做的是：1.改变img的宽度、高度和src；2.隐藏h1和p。

我该怎么做{heroCards.map(...)}？

提前致谢。

标签： javascripthtmlcssreactjs

解决方案

地图没有太大变化，不清楚你想改变哪张卡片，但就像给你的卡片一个新的道具一样简单。

    const Card = props => (
        <Link to={props.link}>
            <Cardbox>
                <Cards bg={require(`./../images/Cards/${props.title}_Card.jpg`)}/>
                {!props.hideNameAndRole && (
                <div>
                    <Name>{props.title}</Name>
                    <Role>{props.text}</Role>
                </div>
                )}
            </Cardbox>
        </Link>
     )

另外，尽量避免在渲染过程中动态要求：（灵感来自这个问题）

    function importAll(r) {
        const heroCards = {};
        r.keys().map((item, index) => { 

          const key = item.replace(
              /\.\/\.\.\/images\/Cards\/(.+)_Card\.jpg/,
              '$1'
          );

          heroCards[key] = r(item);
        });
        return heroCards;
    }

    const heroCards = importAll(
        require.context(
            './../images/Cards',
            false,
            /\.(png|jpe?g|svg)$/
         )
    );

然后向您的选项卡组件添加一个状态并在单击按钮时更改它：

    state = {
        hideNameAndRole: false,
    }
    handleHideClick = () => this.setState(() => ({ hideNameAndRole: true })
    makeHeroCard = (hero, index) => (
        <Card
            title={hero.name}
            text={hero.type.join(', ')}
            image={heroCards[hero.name]}
            link={hero.name}
            key={index}
            hideNameAndRole={this.state.hideNameAndRole}
        />
    )
    ...
    render() {
        ...
        <button onClick={this.handleHideClick}>Click here and change css</button>
        ...
    }

你质疑提到的css，而不是有条件地渲染Name，Role你可以在他们的css中添加一个插值：

    const Name = styled.h3`
        ...
        ${props => (props.hidden? 'visibility: hidden;' : '')}

    `

    const Role = styled.p`
        ...
        ${props => (props.hidden? 'visibility: hidden;' : '')}
    `

并通过相同的道具激活插值：

    const Card = props => (
        <Link to={props.link}>
            <Cardbox>
                <Cards bg={require(`./../images/Cards/${props.title}_Card.jpg`)}/>
                <div>
                    <Name hidden={props.hideNameAndRole}>{props.title}</Name>
                    <Role hidden={props.hideNameAndRole}>{props.text}</Role>
                </div>
            </Cardbox>
        </Link>
    )

推荐阅读