如何使用样式组件仅为 <li> 中的活动项目添加背景颜色？

Question

只是想知道如何使用 styed 组件为活动项目添加背景颜色？几乎像 jQuery 的 add/remove class.

我在我的状态下定义了一个活动布尔变量，如下所示：

constructor(props) {
    super(props);
    this.state = {
      placeholder: '',
      active: false,
    };
    this.handleClick = this.handleClick.bind(this);
    this.handleImageError = this.handleImageError.bind(this);
  }

handleClick 函数可以像这样真正激活为真：

handleClick() {
    this.setState({ active: true });
  }

在我的渲染函数中我有 HTML 这样的：

 <MemberStyled className="member-item" active={active} onClick={this.handleClick}>
        <MemberStyled.avatar src={imgSource || placeholder} onError={this.handleImageError} />
        <MemberStyled.user>{name}</MemberStyled.user>
 </MemberStyled>

在member.styles.js文件中，我有这样的样式：

const MemberStyled = styled.li`
 background-color: ${props => props.active ? red : 'transparent'};
`;

现在，所有单击的项目都会将颜色更改为红色。如何在样式组件中仅使活动项目具有红色背景？

非常感谢！

Answer 1

所以所有 member-item 看起来都是更高 parent 组件的一部分。您应该将活动状态推送到此 parent。然后给每个 member-item 一个唯一的道具（索引，或者 id 应该做）。然后在调用 parent 的 handleClick 时，将唯一编号发送给它，parent 应该存储该编号而不是布尔值。最后，在 parent 的渲染中，将唯一数字属性值与活动状态值进行比较，并将其作为 active 布尔属性发送给 member-item。在 member-item 的渲染中使用此布尔值。

// in Parent Component
handleClick(activeKey){
   this.setState({activeKey});
}

isActive(key){
  const {activeKey} = this.state;
  return key === activeKey;
}

render(){
  return this.memberItems.map((index, itemData) => <MemberStyled active={this.isActive(index)} itemKey={index} handleClick={this.handleClick.bind(this, index)} />)
}

Answer 2

对我来说最好的方法是在父组件中保存活动元素的索引：

  constructor(props) {
    super(props);
    this.state = {
      placeholder: '',
      active: -1,
    };
    this.handleClick = this.handleClick.bind(this);
    this.handleImageError = this.handleImageError.bind(this);
  }

  onClick(e, index) {
    this.setState({
      active: index,
    });
  }

  render() {
    const { active } = this.state;
    return this.memberItems.map((itemData, index) => <MemberStyled active={index === active} itemKey={index} handleClick={() => handleClick(this, index)} />)
}

如何使用样式组件仅为 <li> 中的活动项目添加背景颜色？

how to add background color only for actived item in a <li> using styled component?

reactjs

styled-components