CSS

Question

假设我有一个Parent组件，它会呈现一组Child个组件。当悬停其中一个Child组件时，我希望突出显示（bg颜色）属于同一组的Child组件。

请参阅下面的代码，每个Child都有一个组属性：

const Parent = React.createClass({
    render() {
        const rows = [];
        let group = 1;
        for (let i = 1; i <= 12; i++) {
            rows.push(<Child key={i} id={i} group={group} />);

            if (i % 3 === 0) {
                group++;
            }
        }
        return (
            <ul>
                {rows}
            </ul>
        );
    }
});

const Child = React.createClass({
    render() {
        return (
            <li className="child">id: {this.props.id} - group: {this.props.group}</li>
        );
    }
});

ReactDOM.render(
    <Parent />,
    document.getElementById('app')
);

如果我将Child的id属性设置为6，那么如何突出显示同一组中的所有Child个组件，即组2？

注意：我是React的新手，如果标题具有误导性，我很抱歉。

Answer 1

嗯，可以通过简单的css代码+一些反应修改来完成。首先，如果您的组很少，这意味着组列表，这意味着列表列表。您将拥有Container组件，Group组件和GroupItem组件。 Container将呈现很少的Group组件，这些组件将呈现很少的GroupItem组件。

这将是这样的：

export default class Container extends React.Component {
    render() {
        return(<ul>
            {this.state.groups.map((group) => {
                return <Group items={group.items} />
            })}
        </ul>)
    }
}

export default class Group extends React.Component {
    render() {
        return (<ul>
            {this.props.items.map((item) => {
                return <GroupItem />
            })}
        </ul>)
    }
}

export default class GroupItem extends React.Component {
    render() {
        return (<li>some content here</li>);
    }
}

现在给每个小组一个班级，当你悬停时会突出显示儿子：

.group:hover > li {
    background-color: color;
}

现在，当您将鼠标悬停时，就像悬停单个项目但适用于所有项目一样，其所有子项都将突出显示

Answer 2

我会像当地国家一样接近这个：

简而言之，我们正在为父级的当前组生成状态变量。然后我们给每个孩子一个它在onMouseEnter上调用的代理方法，在那里它将group道具传递给父方法。然后，每个渲染都会比较活动组与其自己的组，并在子组上设置活动支柱。然后，孩子检查其活动道具以应用active课程。显然，你可以大量扩展这种行为。查看React的事件系统here。

这个小提琴是它如何运作的一个非常基本的例子：

https://jsfiddle.net/69z2wepo/53444/

CSS

.active {
  background-color: yellow;
}

JS

const Parent = React.createClass({
    getInitialState() {
        return {
            group: null
        }
    },

    render() {
        const rows = [];
        let group = 1;

        for (let i = 1; i <= 12; i++) {
            const child = <Child 
              key={i}
              id={i}
              group={group} 
              hover={(group) => this.setState({ group })}
              active={group === this.state.group} />;

            rows.push(child);

            if (i % 3 === 0) {
                group++;
            }
        }

        return (
            <ul>
                {rows}
            </ul>
        );
    }
});

const Child = React.createClass({
    render() {
        return (
            <li 
              className={this.props.active && 'active'}
              onMouseEnter={() => this.props.hover(this.props.group)}
            >
                id: {this.props.id} - group: {this.props.group}
            </li>
        );
    }
});

ReactDOM.render(
    <Parent />,
    document.getElementById('app')
);

如何从父母中选择一组孩子？

2 个答案:

CSS

JS