javascript - 根据状态和索引动态更改样式组件

Question

所以我有一个从 API 请求返回的列表(不重要)我们称之为 list = [1,2,3,4,5,6,7];

现在，在 render() 内部，我有如下内容

render(){
  <Wrapper>
    {list.map((i) => {
      return (<Button id = {i} onClick = {this.customFunc.bind(this, i)} />)
    }
  </Wrapper>
}

现在，我有另一个列表，我们称之为 list_check = [false...] (对于上面列出的所有 7 个元素)

假设 customFunc 将 list_check 中的相应按钮 ID 从 false 更改为 true。

例如如果我点击按钮 1 (id = 1) 则 list_check 变为 [false, true, false...]

** 现在我的问题是:我有 2 个样式组件，Button 和 Button_Selected，我如何在两个样式组件之间动态更改，以便如果单击该唯一按钮(更改 list_check[index] = true)，该元素将变为 Button_Selected 而不是 Button(整个列表初始化为 Button，因为所有元素均为 false)

只是为了明确一点:两个数组都位于 this.state 中，并且由 2 个样式组件组成，我的意思是存在

const Button = styled.div`
  //styling here
`;

和

const Button_Selected = Button.extend`
 //Small styling change to differentiate between selected and not selected
`;

编辑:所有答案都很棒!可惜我只能选择一个:(

Answer 1

您可以将组件保存到另一个变量。

this.state.list_check.map((item, i) => {
    const NecessaryButton = item ? SelectedButton : Button;
    return <NecessaryButton onClick={() => this.makeSelected(i)}>Normal Button</NecessaryButton>
})

您可以查看一个实例 here .