माता-पिता से बच्चों के समूह का चयन कैसे करें?

Question

कहें कि मेरे पास Parent घटक है जो Child घटकों का एक सेट प्रस्तुत करता है। जब उन Child घटक में से एक को घुमाते हैं, तो मैं उसी समूह में मौजूद 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') 
); 

अगर मैं 6 की आईडी संपत्ति के साथ Child मंडराना, मैं Child घटकों, जिसमें हैं के सभी कैसे उजागर करते एक ही समूह, यानी समूह 2?

एनबी: यदि मैं शीर्षक भ्रामक है तो मैं प्रतिक्रिया करने के लिए नया हूं और खेद है।

Answer 1

मैं स्थानीय राज्य के साथ इस तरह से संपर्क करूंगा:

संक्षेप में, हम वर्तमान समूह के लिए मूल चर के लिए एक राज्य चर उत्पन्न कर रहे हैं। फिर हम प्रत्येक बच्चे को एक प्रॉक्सी विधि देते हैं जो इसे onMouseEnter पर कॉल करता है जहां यह पैरेंट विधि के लिए group प्रोप पास करता है। फिर, प्रत्येक रेंडर सक्रिय समूह की तुलना अपने समूह के विरुद्ध करता है और बच्चे पर सक्रिय प्रोप सेट करता है। तब बच्चा active कक्षा लागू करने के लिए अपने सक्रिय प्रोप की जांच करता है। जाहिर है आप इस व्यवहार को बहुत बढ़ा सकते हैं। प्रतिक्रिया की घटना प्रणाली देखें, here।

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

सीएसएस

.active { 
    background-color: yellow; 
} 

जे एस

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

अच्छा, यह सरल सीएसएस कोड + कुछ प्रतिक्रिया संशोधनों द्वारा किया जा सकता है। सबसे पहले, यदि आपके पास कुछ समूह हैं जिसका अर्थ है समूह की सूचियां, जिसका अर्थ सूचियों की सूची है। आपके पास कंटेनर घटक, समूह घटक, और 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; 
} 

जब आप समूह मंडराना होगा, जो

वह कुछ इस तरह होगा एक आइटम को घुमाने की तरह, लेकिन सभी वस्तुओं पर लागू होता है, इसके सभी बच्चों को