Question

所以，我一直试图找出一些反应和语义反应的东西，我是新手做出反应，所以请原谅“哦，你这样做是错误的。”

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

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

你需要提升你的状态＆＃34;到True组件。现在，每个HomePage组件都有自己的状态，但ChoreDetail组件应该具有由ChoreDetail保持的共享状态。然后，您可以将HomePage向下传递，例如this.state.activeItem。如果你不在可映射组件之间共享状态，那么每个组件都将跟踪它们自己的状态，这不是你想要的。

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

编辑（看到问题后更新）：我不太了解语义反应ui来回答关于衰落的问题。您有一些React问题，因此解决这些可能会修复您的转换问题，但我无法确定。

点击和显示内容的转换

1 个答案: