单击和显示内容的过渡

Question

所以，我一直在尝试用 react 和 semantic-react-ui 找出一些东西，我是新手，所以请原谅 "oh you're doing it wrongs"。

下面是我的代码的关键组成部分，我想要做的是，当用户单击列表中的项目时，该列表项目的相关内容将显示在卡片的右侧。如果单击相同的元素，它将默认为特定卡片的默认描述。

HomePage.js

import React, {Component} from 'react';
import {keys} from 'lodash';
import {Card, Container, Icon} from 'semantic-ui-react';
import ChoreDetails from './ChoreDetails';

class HomePage extends Component {
    constructor(props) {
        super(props);
    }

    renderChores = chores => (
        chores.map(chore => this.renderChore(chore))
    );

    renderChore = chore => {
        return (
            <Card key={chore.name}>
                <Card.Content>
                    <Card.Header>
                        {chore.name}
                    </Card.Header>
                    <Card.Meta>
                        {chore.assigned}
                    </Card.Meta>
                    <ChoreDetails chore={chore}/>
                </Card.Content>
                <Card.Content extra>
                    <a>
                        <Icon name='tasks' />
                        { keys(chore.choreList).length } Chores
                    </a>
                </Card.Content>
            </Card>
        )
    };

    render() {
        const displayChores = this.renderChores(this.props.chores);

        return (
            <Container>
                <Card.Group doubling={true} stackable={true} itemsPerRow="2">
                    { displayChores }
                </Card.Group>
            </Container>
        );
    }
}

export default HomePage;

ChoreDetails.js

import React, { Component } from 'react';
import {Card, Container, Grid, List, Transition} from 'semantic-ui-react';

class ChoreDetails extends Component {

    constructor(props) {
        super(props);

        this.state = {
            visible: true,
            animation: 'drop',
            defaultDescription: this.showDescription(props.chore, 'drop'),
            itemClicked: null,
            itemActive: null,
        };
    }

    renderChoreList = list => (
        list.map(item => <List.Item as="a" key={item.name} onClick={this.showDetails.bind(null, item)} item={this.props.item}>
            <List.Icon name="tasks" />
            <List.Content key={item.name} content={item.name} />
        </List.Item>
    ));

    showDescription = (item, animation) => {
        return (
            <Transition
                transitionOnMount={true}
                key={'default_description_' + item.name}
                reactKey={'default_description_' + item.name}
                visible={true}
                animation={animation}
                duration={300}
            >
                <Container>{item.description}</Container>
            </Transition>
        )
    };

    showDetails = (item) => {
        this.setState({
            itemClicked: item,
        });
    };

    getDescriptions = (choreGroup, itemClicked, animation) => (
        choreGroup.choreList.map((chore, index) => <Transition
            key={choreGroup.name + '_' + index}
            reactKey={choreGroup.name + '_' + index}
            visible={(itemClicked.name === chore.name)}
            animation={animation}
            duration={300}
        >
            <Container>{chore.description}</Container>
        </Transition>)
    );

    render() {
        const { itemClicked, defaultDescription, animation } = this.state;
        const displayChoreList = this.renderChoreList(this.props.chore.choreList);
        const descriptionContainers = (itemClicked) ? this.getDescriptions(this.props.chore, itemClicked, animation) : defaultDescription;

        if (itemClicked) {
            console.log(descriptionContainers);
        }

        return (
            <Card.Description>
                <Grid>
                    <Grid.Row>
                        <Grid.Column width={4}>
                            <List>
                                {displayChoreList}
                            </List>
                        </Grid.Column>
                        <Grid.Column width={12}>
                            <Transition.Group>
                            {descriptionContainers}
                            </Transition.Group>
                        </Grid.Column>
                    </Grid.Row>
                </Grid>
            </Card.Description>
        )
    }

}

ChoreDetails.defaultProps = {
    chore: []
};

export default ChoreDetails;

如何获得正确的元素显示顺序，在单击时使当前活动元素淡出，然后在其转换完成后触发传入的项目转换？

Answer 1

您需要 "lift your state up" 到 HomePage 组件。现在，每个 ChoreDetail 组件都有自己的状态，但是 ChoreDetail 组件应该有一个由 HomePage 持有的共享状态。然后，你可以把this.state.activeItem传下去，比如<ChoreDetails activeItem={this.state.activeItem} />。如果您不在可映射组件之间共享状态，它们将各自跟踪自己的状态，这不是您想要的。

此外，没有必要将 this.props.items 传递给任何函数，因为它已经在所有方法的范围内。您可以直接在 renderChores 方法中使用 this.props.items。

编辑（看到问题后更新）：我对 semantic-react-ui 了解不够，无法回答有关褪色的问题。您有一些 React 问题，因此解决这些问题可能解决您的过渡问题，但我不能确定。

单击和显示内容的过渡

Transitions for clicking and displaying content

transitions

reactjs

semantic-ui-react