Javascript 单击样式化组件（映射函数）时更改css

我正在尝试创建一个按钮来更改一个组件（Card.js）的css，但是我不能这样做，因为我必须对选项卡使用映射函数

这就是密码

组件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

const Cardbox=styled.div`
...
`
const Cards=styled.div`
宽度：150px；
高度：220px；
背景：url（${props=>props.bg}）没有重复的顶部中心；
`
const Name=styled.h3`
...
`
const Role=styled.p`
...
`
康斯特卡=道具=>(
{props.title}
{props.text}
)
导出默认卡

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

类选项卡扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
...
}
}
...
makeHeroCard=（英雄，索引）=>(
)
render（）{
...
返回(
单击此处并更改css
{value===0&&(
{heroCards.map（（英雄，索引）=>this.makeherocards（英雄，索引））}
)}
{value===1&&(
{贺卡
.filter（hero=>hero.type.includes（'TANK'））
.map（（英雄，索引）=>此.makeHeroCard（英雄，索引））
}
)}
)
}
}
导出默认选项卡

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

如何使用

{heroCards.map（…）}

---

提前感谢。

地图变化不大，不清楚要更改哪张牌，但只需给你的牌添加一个新道具即可

    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>
     )

然后将状态添加到选项卡组件，并单击按钮进行更改：

    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>
        ...
    }

并通过同一道具激活插值：

    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>
    )

const Card=props=>(
{props.title}
{props.text}
)

我想知道为什么不能将您需要的样式嵌入到通用样式表中，而只需在元素上添加或删除类？因为这不是样式化组件的工作方式。样式化组件为我们抽象了类名和样式表。嗨，真的谢谢！我现在可以处理卡片的宽度和高度，但我犯了一个错误：组件是。那么，我如何在单击时更改卡的bg image={require（

/。/images/Cards/${hero.name}{u Card.jpg

）}）呢？同样的方法。。。你能准确地解释一下你想要做的更改吗？如果可以，我建议你首先导入所有的资源，而不是在渲染过程中动态地导入所需的资源。我正在更新我的答案，因为我在尝试类似${props=>（props.reduce？）的东西背景：url（${props=>props.bg2}）；'：''）。这是正确的方法吗？是的，如果

reduce

道具是要将背景更改为

bg2

道具。。。无论如何，你绝对可以写这个

    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>
        ...
    }

    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>
    )