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。

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

**现在我的问题是：我有2个样式组件，Button和Button_Selected，如何在2个样式的组件之间动态更改，以便在单击该唯一按钮时（更改list_check[index] = true），该元素将变为Button_Selected而不是Button（整个列表被初始化为{ {1}}因为所有元素都是Button）

只是说清楚：两个数组都位于false中，并且由2个样式组件构成，我的意思是存在

this.state

和

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

编辑：所有答案都很棒！太糟糕了我只能选择一个：（

Answer 1

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

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

您可以看到实时示例here。

Answer 2

虽然您可以根据条件渲染返回2个按钮。您也可以将道具传递给styled Button，以便根据道具改变您的风格。

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

在你的风格按钮中：

  const Button = styled.div`
  styleName: ${props => props.isSelected ? 'styling_if_Selected' : 'styling_if_not_selected'};
`;

Answer 3

最简单的方法是在选择状态时使用单个Button组件并处理状态。根据此状态，您可以切换类。例如：

class Button extends React.Component {
    state = {
        isSelected: false
    };

    handleClick() {
        //Here we will set the state change and call the onClick function passed by props
        this.setState({isSelected: !this.state.isSelected}, () => { this.props.onClick(); });
    }

    render() {
        return (
            <button 
                class={this.state.isButtonSelected ? "classBtnSelected" : "classBtnDefault"} 
                onClick={this.handleClick}
            />
        );
    }
}

但是，如果要切换组件，可以使用状态来控制它是否被选中并进行条件渲染。例如：

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

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

3 个答案: