保持相同的状态变量以实现显示更多/更少的功能

Question

我有一个带有多张卡的页面，其中每张卡都有一个项目列表。我一直在尝试在每个卡上实现更多show/show show show show shove实现。对于一张卡，我通过在状态对象中添加两个属性来正确处理它。但是，如果我为所有卡实现相同的功能，我最终会为每张卡添加更多状态对象属性。寻找一种更好的方法，我可以在其中使用一个常见的处理所有卡显示更多/更少的实现

只需要一种有效的方法来实现这一目标。帮助将不胜感激

组件代码

只有两张卡的示例

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>
   )
 }

Answer 1

正如其他人所说的 - 将其构建为可重复使用的组件。首先确定您重复自己并将其提取出来的地方。练习变得更容易。

我会从卡开始。您可以使用卡类型(您也可以使用接口，但这是个人喜好(，然后添加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>
    )
  }
}

此应用程序可让您单击按钮将新卡添加到状态。