Динамически изменять стилизованный компонент на основе состояния И индекса - PullRequest
Новая
       15

Динамически изменять стилизованный компонент на основе состояния И индекса

0 голосов
/ 30 мая 2018

Итак, у меня есть список, который был возвращен из запроса 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 с 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, и под двумя стилизованными компонентами я имею в виду 

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

и 

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

редактировать: все ответы великолепны!Жаль, что я могу выбрать только один: (

Ответы [ 3 ]

0 голосов
/ 30 мая 2018

Вы можете просто сохранить компонент в другой переменной. 

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

Вы можете увидеть живой пример здесь .

0 голосов
/ 30 мая 2018

Самый простой подход - иметь один компонент 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>
}
0 голосов
/ 30 мая 2018

Хотя вы можете вернуть 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'};
`;
...