Поддержание той же переменной состояния для реализации функции Показать больше / меньше - PullRequest
Новая
       9

Поддержание той же переменной состояния для реализации функции Показать больше / меньше

0 голосов
/ 08 мая 2019

У меня есть страница с несколькими карточками, где на каждой карточке есть список элементов. Я пытался реализовать реализацию Показать больше / Показать меньше на каждой карточке. Для одной карты я понимаю это правильно, добавляя два свойства к объекту состояния. Но если я реализую то же самое для всех карт, я добавлю больше свойств объекта состояния, по одному для каждой карты. В поисках лучшего способа, где я могу использовать один общий для обработки всех карт Показать больше / меньше реализация

Просто нужен эффективный подход для достижения этой цели. Помощь будет оценена

Код компонента

Пример только с двумя картами 

import * as React from 'react';
interface IState{
  arr1:[],
  arr2: [],
  arr1ExpandFlag: boolean, // For updating Button label(More/Less)
  arr2ExpandFlag : boolean
  arr1temsToShow: number,  // Number of items to show
  arr2itemsToShow: number 
  //I will end up adding two variables one for each card
}
export default class App extends React.Component<{},IState> {

  constructor(props:any){
    super(props);
    this.state = {
      arr1 :[],
      arr2 :[],
      arr1ExpandFlag: false,
      arr1ExpandFlag: false,
      arr1itemsToShow: 3,
      arr2itemsToShow: 3,
    }
  }

  showMore = (type: string) => { // end up adding if conditions
    if(type === 'arr1')
    {
      (this.state.arr1itemsToShow === 3) ? 
      (this.setState({ arr1itemsToShow: this.state.arr1.length, arr1ExpandFlag: true })):
      (this.setState({ arr1itemsToShow: 3,arr1ExpandFlag: false}))
    }
    if(type === 'arr2')
    {
      (this.state.arr2itemsToShow === 3) ? 
      (this.setState({ arr2itemsToShow: this.state.arr2.length, arr2ExpandFlag: true })):
      (this.setState({ arr2itemsToShow: 3, arr2ExpandFlag: false}))
    }
  }

 render()    // This is just for two cards
 {
   return
   (
      <div> 
        <div>
          {this.state.arr1.slice(0, this.state.arr1itemsToShow).map((data : any, i) => 
            <p key={i}>{data.user}</p>
          )}
          <a onClick={() => this.showMore('arr1')}>
            { (this.state.arr1ExpandFlag) ? 
              ( <span>Show less</span>)   : 
              ( <span>Show more</span>)
            }
          </a>  
        </div>
       <div>
         {this.state.arr2.slice(0, this.state.arr2itemsToShow).map((data : any, i) => 
             <p key={i}>{data.user}</p>
         )}
         <a onClick={() => this.showMore('arr2')}>
          { (this.state.arr2ExpandFlag) ? 
            (<span>Show less</span>)   : 
            (<span>Show more</span>)
          }
         </a>  
      </div>
    </div>
   )
 }

1 Ответ

1 голос
/ 08 мая 2019

Как уже говорили другие - встроить его в повторно используемые компоненты.Начните с определения мест, где вы повторяете себя и извлекаете их.С практикой это становится легче.

Я бы начал с Карты.Вы можете использовать тип карты (вы также можете использовать интерфейс, но это личное предпочтение), а затем добавить обработчик onClickExpand, чтобы сформировать реквизиты для этого элемента управления. 

type Item = {
  user: string;
}

type Card = {
  items: Item[];
  expanded?: boolean;
  numItemsShowing: number;
}

type CardProps = Card & {
  onClickExpand: () => void;
};

const Card = (props: CardProps) => {
  const { expanded, items, numItemsShowing, onClickExpand } = props;
  return (
    <div>
      {items.slice(0, numItemsShowing).map((data, i) => (
        <p key={i}>{data.user}</p>
      ))}
      <a onClick={onClickExpand}>
        {expanded
          ? <span>Show less</span>
          : <span>Show more</span>
        }
      </a>
    </div>
  );
}

Тогда ваше приложение может быть проще: 

type State = {
  card: Card[];
}

export default class App extends React.Component<{}, State> {
  state = { cards: [] };

  showMore = (index: number) => () => {
    this.setState({
      cards: this.state.cards.map((card, i) => {
        // Only modify card if it's the index we care about
        if (i === index) {
          return {
            ...card,
            expanded: true,
          }
        }
        return card;
      })
    });
  }

  addCard = () => {
    const newCard = {
      items: [],
      expanded: false,
      numItemsShowing: 0
    };

    this.setState({
      cards: [ ...this.state.cards, newCard ] // add to end of array
    });
  }

  render() {
    return (
      <div>
        {this.state.cards.map((card, i) =>
          <Card
            {...card}
            onClickExpand={this.showMore(i)}
            key={i}
          />
        )}

        <button onClick={this.addCard}>Add Card</button>
      </div>
    )
  }
}

Это приложение позволяет нажать кнопку, чтобы добавить новую карту в штат.

...