React与Semantic-UI-React：点击列表切换卡片内容及元素顺序问题咨询

Hey there! Let's break down how to tackle this feature step by step—since you're using React and Semantic-UI-React, we can leverage both React's state management and Semantic's built-in components to make this clean and smooth.

1. 状态管理：跟踪选中的列表项 #

First up, we need to track which list item is active in your HomePage.js. This state will control whether the right card shows detailed content or the default description.

import React, { useState } from 'react';
import { Grid, List } from 'semantic-ui-react';
import ChoreDetails from './ChoreDetails';

// Sample chore data (replace with your actual data)
const chores = [
  { id: 1, name: '扫地', details: '每天打扫客厅和卧室的地面，重点清理角落灰尘', defaultDesc: '点击查看扫地的详细说明' },
  { id: 2, name: '洗碗', details: '饭后及时清洗餐具，擦干后分类放入橱柜', defaultDesc: '点击查看洗碗的详细说明' },
  { id: 3, name: '整理衣柜', details: '每周整理一次衣物，按季节和类型分类摆放', defaultDesc: '点击查看整理衣柜的详细说明' },
];

const HomePage = () => {
  // Track the ID of the currently active chore (null = no selection)
  const [activeChoreId, setActiveChoreId] = useState(null);

  // Handle list item clicks: toggle selection if clicking the same item
  const handleChoreClick = (choreId) => {
    setActiveChoreId(prevId => prevId === choreId ? null : choreId);
  };

  // Get the full data of the active chore
  const activeChore = chores.find(chore => chore.id === activeChoreId);

  return (
    <Grid columns={2} padded style={{ marginTop: '2rem' }}>
      <Grid.Column width={4}>
        <List selection verticalAlign='middle'>
          {chores.map(chore => (
            <List.Item
              key={chore.id}
              active={chore.id === activeChoreId}
              onClick={() => handleChoreClick(chore.id)}
              style={{ cursor: 'pointer', transition: 'background-color 0.2s' }}
            >
              <List.Content>{chore.name}</List.Content>
            </List.Item>
          ))}
        </List>
      </Grid.Column>
      <Grid.Column width={12}>
        {/* Pass active chore data to the details component */}
        <ChoreDetails activeChore={activeChore} />
      </Grid.Column>
    </Grid>
  );
};

export default HomePage;

2. 详情组件：切换内容 + 过渡动画 #

In ChoreDetails.js, we'll use Semantic-UI-React's Transition component to add smooth content switching animations. We'll toggle between detailed content and the default description based on whether an active chore exists.

import React from 'react';
import { Card, Transition } from 'semantic-ui-react';

const ChoreDetails = ({ activeChore }) => {
  // Control animation visibility based on active chore state
  const showDetails = !!activeChore;

  return (
    <Card fluid>
      <Card.Content>
        {/* Use Semantic's Transition for smooth fade effect */}
        <Transition
          visible={showDetails}
          animation='fade'
          duration={500}
          unmountOnHide={false} // Keep DOM node to avoid layout jumps
        >
          {showDetails ? (
            <div>
              <Card.Header>{activeChore.name}</Card.Header>
              <Card.Meta>详细说明</Card.Meta>
              <Card.Description>{activeChore.details}</Card.Description>
            </div>
          ) : (
            <Card.Description>请选择左侧的任务查看详情</Card.Description>
          )}
        </Transition>
      </Card.Content>
    </Card>
  );
};

export default ChoreDetails;

3. 保证元素顺序与布局稳定 #

• Use Semantic's Grid component to fix the width of left/right columns—this ensures the list and card stay in their positions regardless of content changes.
• The List selection prop automatically adds an active style to the clicked item, so users clearly see their selection.
• Setting unmountOnHide={false} on the Transition prevents DOM nodes from being unmounted/hidden abruptly, which keeps the layout stable and avoids jumps.

Quick Extra Tweaks #

• If your chore data is fetched asynchronously, add a useEffect hook in HomePage.js to handle data loading and state updates.
• Swap out the fade animation for other options like slide down, scale, or slide left by changing the animation prop on the Transition component.
• Add hover styles to list items (we included a subtle background transition in the code above) to improve interactivity.

内容的提问来源于stack exchange，提问作者Justin Tangas