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

Question

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

下面

见代码，每个Child拥有一批性质：

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

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与6 id属性，我怎么强调所有Child组件这是在中同组，即组2？

注意：如果标题有误导性，我是React新手，对不起。

Answer 1

我会用这样的本地状态来处理：

简而言之，我们为父级上的当前组生成一个状态变量。然后我们给每个孩子一个代理方法，它调用onMouseEnter，它将group prop传递给父方法。然后，每个渲染器将活动组与其自己的组进行比较，并将活动的道具设置在该孩子上。小孩然后检查其主动道具以应用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') 
); 

Answer 2

那么，它可以通过简单的CSS代码+一些反应修改。 首先，如果你有几个组，意味着列表的组，列表的列表。 您将拥有Container组件，Group组件和GroupItem组件。 容器将呈现几个组件组件，这些组件件将呈现少量的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; 
} 

现在，当你将鼠标悬停组，这是像悬停一个单一的项目，但适用于所有的项目，其所有的孩子将突出显示