ReactJS और माता पिता / बच्चे घटकों: कैसे मैं इस वैचारिक कैलेंडर का निर्माण करते हैं?

वोट
1

मैं एक ReactJS परियोजना पर अवधारणा मैं के बाद कर रहा हूँ, जहां वांछित व्यवहार प्रदर्शित करने के लिए है के लिए एक उदाहरण के रूप में एक कैलेंडर काम कर रहा हूँ,:

January 1, 2016
  Activity 1
  Activity 2

January 2, 2016
  Activity 3

January 4, 2016
  Activity 4
  Activity 5

January 8, 2016
  Activity 6

दूसरे शब्दों में, दिलचस्प भाग के लिए, शीर्षक की तारीख, सीधी सीएसएस के अलावा, एक प्रवेश से पहले एक बार प्रदर्शित करने के लिए, एक दिन के लिए पहली प्रविष्टि से पहले करना है, और फिर एक दिन के लिए पहली प्रविष्टि ऊपर नहीं दिखाया जा।

फेसबुक / प्रतिक्रिया / फ्लक्स प्रभावी रूप से साझा परिवर्तनशील राज्य पर युद्ध की घोषणा, और एक स्पष्ट लेकिन गलत दृष्टिकोण साझा परिवर्तनशील राज्य के माध्यम से इस को हल करने के लिए होगा। एक बेहतर, या सबसे अच्छा तरीका है क्या है, जहां एक उप-घटक अलग तरह से अपनी ही राज्य से अधिक के आधार पर प्रदर्शित किया जाना चाहिए ऊपर के रूप में कुछ दृष्टिकोण। इस परिवर्तनशील राज्य साझा कर सकते हैं की जरूरत नहीं है, लेकिन मैं नहीं दिख रहा है जो सबसे मुहावरेदार दृष्टिकोण हो सकता है।

--CLARIFICATION--

इस प्रश्न पर @SeanO द्वारा पहली टिप्पणी प्रदान करता है (सही ढंग से, मेरा मानना ​​है) एक एल्गोरिथम कि समस्या के प्रकार को हल करती है। और मैं साल पहले एक अच्छा, crufty पर्ल सीजीआई पर कुछ इस तरह था,।

लेकिन क्या मैं वास्तव में लिए देख रहा था वास्तव में के बारे में एल्गोरिथ्म किस तरह यहाँ उचित होगा नहीं है, लेकिन कैसे उचित रूप से ReactJS में इसे लागू करने।

--ADDITIONAL CLARIFICATION--

एक सवाल है कि मैं अपने समाधान देखने के बाद किया था: के रूप में दिया है, यह स्थिर डेटा के लिए काम करता है। क्या मैं में दिलचस्पी रखता हूँ न केवल के रूप में कल ​​प्रदर्शित यूआई परिवर्तन, होने भी शामिल है आज हो जाता है और अवलंबी प्रदर्शन से खींचा जाता है, लेकिन कुछ है जहां लोगों को अन्यथा कैलेंडर में नया डेटा जोड़ सकते हैं या कर सकते हैं इसे बदलने के। उपयोगकर्ता द्वारा शुरू किए परिवर्तन बने उपकरण के साथ साथ काफी आसान है, लेकिन मैं यहाँ सोच रहा हूँ। इस सवाल का जवाब बस एक ही बात है, लेकिन सब कुछ राज्य के लिए परिवर्तनशील ले जाते हैं, है या एक अलग दृष्टिकोण उचित है?

मैं के माध्यम से खींच सकते हैं और इसे लागू, शायद बुरी तरह से, मेरे वर्तमान समझ पर, लेकिन यहाँ मैं जानना चाहता हूँ कि क्या समाधान वास्तव में जीत चाहते हैं। @ उसके जवाब में WiktorKozlik के उद्घाटन टिप्पणी वास्तव में क्या मैं जानना चाहता था: एक घटक डेटा वह खुद को प्रस्तुत करने के लिए प्राप्त करता है की तुलना में अधिक पता करने के लिए की जरूरत है, तो यह एक संकेत है कि घटक के साथ कुछ गड़बड़ है है।

धन्यवाद,

06/03/2015 को 15:37
उपयोगकर्ता
अन्य भाषाओं में...                            


2 जवाब

वोट
3

एक घटक डेटा वह खुद को प्रस्तुत करने के लिए प्राप्त करता है की तुलना में अधिक पता करने के लिए की जरूरत है, तो यह एक संकेत है कि कुछ घटक के साथ कुछ गड़बड़ है। मुझे आश्चर्य है अगर आप के बजाय यूआई डिजाइन से घटक संरचना पाने के डेटा आप (गतिविधियों) है के आकार के घटकों मैच के लिए प्रयास करें।

उदाहरण के लिए, नीचे की तरह संरचना के साथ यूआई का प्रतिनिधित्व आपको लगता है कि कौन सा डेटा एल्गोरिदम के बारे में चिंता किए बिना प्रत्येक घटक के लिए आवश्यक है की सुविधा देता है।

<Calendar activities={...}>
    <CalendarDay day="2016-01-01" activities={[activity1, activity2]}>
        January 1, 2016
        <Activity activity={activity1}>
            Activity 1
        </Activity>
        <Activity activity={activity2}>
            Activity 2
        </Activity>
    </CalendarDay>
    <CalendarDay day="2016-01-02" activities={[activity3]}>
        January 2, 2016
        <Activity activity={activity3}>
            Activity 3
        </Activity>
    </CalendarDay>
    ...
</Calendar>
07/03/2015 को 02:31
का स्रोत उपयोगकर्ता

वोट
2

आम तौर पर, पुन: प्रयोज्य घटक है कि आंतरिक स्थिति पर अकेले निर्भर नहीं है के लिए महत्वपूर्ण गुण का प्रयोग है। बना बच्चों में नीचे शीर्ष स्तर के घटकों से डाटा बहती है। यह मदद करता है एक बहुत जिम्मेदारियों में नीचे तोड़ने के लिए यूआई (ठीक उसी तरह आप अन्य स्थितियों में SRP उपयोग चाहते हैं)।

उदाहरण के लिए, अपने कल्पना को देखते हुए ऐसा लगता है जैसे तीन नेस्टेड घटकों / जिम्मेदारियों देखते हैं:

  • कैलेंडर घटक, निर्णय लेने से जो दिन रेंडर करने के लिए और उन्हें बाहर रखना करने के लिए कैसे के लिए जिम्मेदार।
  • डे घटक, तारीख शीर्षक और निहित गतिविधियों प्रतिपादन के लिए जिम्मेदार।
  • गतिविधि घटक, एक भी गतिविधि को प्रदर्शित करने के लिए जिम्मेदार।

के इस घटक इमारत का निर्माण कर देखते हैं। समाप्त उदाहरण है JSFiddle पर उपलब्ध

जब से तुम तुम्हारे साथ शुरू कर रहे हैं डेटा स्वरूप निर्दिष्ट नहीं किया है, चलो एक तारीख और एक गतिविधि प्रत्येक नाम के साथ वस्तुओं की एक सरल सरणी के साथ चलते हैं:

var activities = [
  { day: "2016-01-01", name: "Activity 1" },
  { day: "2016-01-01", name: "Activity 2" },
  { day: "2016-01-02", name: "Activity 3" },
  { day: "2016-01-04", name: "Activity 4" },
  { day: "2016-01-04", name: "Activity 5" },
  { day: "2016-01-08", name: "Activity 6" },
];

कैलेंडर घटक

हमारे शीर्ष स्तर के कैलेंडर घटक अपने इनपुट के रूप में इस प्रारूप में डेटा ले जाएगा:

var ActivitiesCalendar = React.createClass({
  propTypes: {
    activities: React.PropTypes.arrayOf(
      React.PropTypes.shape({
        day: React.PropTypes.string.isRequired,
        name: React.PropTypes.string.isRequired
      })
    ).isRequired
  },

  // ...
});

कैलेंडर हर दिन जो एक या अधिक गतिविधियों में शामिल है के लिए एक दिन प्रविष्टि प्रस्तुत करना चाहिए। के एक वस्तु है कि गतिविधियों है कि कि दिन होने वाले विन्यास में, दिन के नक्शे में दिन / गतिविधि जोड़े के बारे में हमारी सरणी को बदलने करते हैं। मैं का उपयोग Underscore.js प्लस कुछ ES6 वाक्य रचना JSX transpiler यहाँ के माध्यम से हमें के लिए उपलब्ध कराया है, लेकिन आप की जरूरत नहीं है:

render() {
  var activitiesByDay = _.chain(this.props.activities)
                         .groupBy((activity) => activity.day)
                         .mapObject((activities) => _.pluck(activities, "name"))
                         .value();

  return <ul>{this.renderActivities(activitiesByDay)}</ul>;
},

// activitiesByDay looks like:
// {
//   "2016-01-01": [
//     "Activity 1",
//     "Activity 2"
//   ],
//   "2016-01-02": [
//     "Activity 3"
//   ],
//   "2016-01-04": [
//     "Activity 4",
//     "Activity 5"
//   ],
//   "2016-01-08": [
//     "Activity 6"
//   ]
// }

ध्यान दें कि के परिणामस्वरूप मूल्य activitiesByDayसंदेह से यूआई हम प्रदर्शित करना चाहते हैं के समान दिखता है। एक प्रारूप है कि आपके यूआई संरचना करने के लिए नक्शे में डेटा को बदलने अक्सर एक शानदार तरीका प्रतिक्रिया में यूआई रचना दृष्टिकोण है।

हम पारित activitiesByDayकरने के लिए renderActivitiesहै, जो पता लगा लेता है जो दिन रेंडर करने के लिए और किस क्रम उन्हें, वस्तु की चाबियाँ पर पुनरावृत्ति उन्हें सॉर्टिंग, और प्रत्येक दिन के लिए गतिविधियों को खींच कर में प्रस्तुत करने के लिए।

renderActivities(activitiesByDay) {
  // compareDays sorts dates in ascending order
  var days = Object.keys(activitiesByDay).sort(compareDays);
  return days.map((day) => {
    return (
      <li key={day}>
        <CalendarDay day={day} activities={activitiesByDay[day]} />
      </li>
    );
  });
}

ध्यान दें कि कैलेंडर घटक कैसे एक दिन देखना चाहिए के बारे में कोई धारणा बना देता है; यह प्रतिनिधियों के लिए यह निर्णय CalendarDay, बस दिन में गुजर और उस दिन के लिए गतिविधियों की सूची।

डे घटक

इसी तरह, कैलेंडर दिन घटक तारीख शीर्षक और खुद गतिविधियों को देता है, लेकिन फिर से एक गतिविधि वास्तव में कैसा दिखता है पर कोई फैसला नहीं है। यह करने के लिए प्रतिनिधियों को इस CalendarActivityघटक:

var CalendarDay = React.createClass({
  propTypes: {
    day: React.PropTypes.string.isRequired,
    activities: React.PropTypes.arrayOf(React.PropTypes.string).isRequired
  },

  render() {
    return (
      <div>
        <strong>{this.formattedDate(this.props.day)}</strong>
        <ul>
          {this.props.activities.map(this.renderActivity)}
        </ul>
      </div>
    );
  },

  formattedDate(date) {
    return moment(date).format("MMMM DD, YYYY");
  },

  renderActivity(activity) {
    return <li key={activity}><CalendarActivity activity={activity} /></li>;
  }
});

मैं उपयोग कर रहा हूँ Moment.js एक ठीक से स्वरूपित तारीख शीर्षक प्रदर्शित करने के लिए; अन्यथा, इस पैटर्न सुंदर के समान दिखता है ActivitiesCalendarघटक।

गतिविधि घटक

अंत में, गतिविधि घटक बस गतिविधि (हमारे मामले में, बस एक स्ट्रिंग में) प्रदर्शित करता है:

var CalendarActivity = React.createClass({
  propTypes: {
    activity: React.PropTypes.string.isRequired
  },

  render() {
    return <div>{this.props.activity}</div>;
  }
});

निष्कर्ष

में समाप्त उदाहरण के लिए, हम डेटा शीर्ष स्तर के घटक (कैलेंडर) गुण के रूप में दिन और गतिविधि घटकों में से बहने देख सकते हैं। प्रत्येक स्तर पर, हम छोटे भागों में डेटा विभाजित और एक अन्य घटक के लिए रवाना इसके बारे में कुछ टुकड़ा भेजें। प्रत्येक घटक छोटे, अधिक केंद्रित घटकों तैयार करता जब तक हम कच्चे डोम नोड्स में खत्म।

यह भी ध्यान रखें कि प्रत्येक घटक की अकेले-खड़े हो सकते हैं केवल इंटरफ़ेस घटक के गुणों के माध्यम से है, और घटकों घटक पदानुक्रम में अपनी स्थिति के लिए युग्मित नहीं कर रहे हैं। यह सही मायने में पुन: प्रयोज्य घटकों के लिए महत्वपूर्ण है। उदाहरण के लिए, हम को देखकर अपने आप में एक कैलेंडर दिन प्रस्तुत करना सकता CalendarDayहै propTypesऔर आकार यह वाणी में यह कुछ डेटा भेजने:

// CalendarDay's propTypes is:
//
//   day: React.PropTypes.string.isRequired,
//   activities: React.PropTypes.arrayOf(React.PropTypes.string).isRequired

var day = <CalendarDay day="2015-12-09"
            activities={["Open gifts", "Blow out candle", "Eat cake"]} />
React.render(day, document.body);

JSFiddle उदाहरण

वहाँ अन्य उच्च स्तरीय तकनीक आप उपयोग कर सकते हैं कर रहे हैं; उदाहरण के लिए, जब फ्लक्स पद्धति का उपयोग कर, यह आम एक घटक डेटा स्टोर में पहुंचने का अपना डेटा लाने के लिए है। के रूप में आप नहीं रह गया है डेटा पोता करने के लिए, आदि बच्चे को माता पिता से नीचे पारित करने के लिए आवश्यक हैं, तो यह डेटा प्राप्त करने में आसान बनाने में कर सकते हैं, लेकिन यह ध्यान देने योग्य बात है कि घटक इस मामले में कम पुन: प्रयोज्य है लायक है।


[अपडेट] गतिशील डेटा के संदर्भ में, प्रतिक्रिया के लिए विहित जवाब कुछ माता पिता घटक अप करने के लिए साझा किए गए डेटा को स्थानांतरित और अन्य घटकों है कि घटक पर है कि डेटा कॉल कार्यों संशोधित करने की जरूरत है कि है; वे उन्हें रंगमंच की सामग्री के रूप में पारित होने से उन कार्यों के लिए उपयोग मिलता है। उदाहरण के लिए, आप हो सकता है

var Application = React.createClass({
  getInitialState() {
    return { activities: myActivities };
  },

  render() {
    return <ActivitiesCalendar activities={this.state.activities}
                               onActivityAdd={this.handleActivityAdd}
                               ... />;
  },

  handleActivityAdd(newActivity) {
    var newData = ...;
    this.setState({activities: newData});
  }
});

के बच्चे ActivitiesCalendarकि जरूरत कैलेंडर के लिए एक गतिविधि को जोड़ने के लिए भी आपूर्ति के लिए एक संदर्भ प्राप्त करना चाहिए सक्षम होने के लिए onActivityAddप्रोप। आप अन्य कार्यों के लिए दोहराने होता है, जैसे onActivityRemove, आदि यह ध्यान रखें कि कैलेंडर घटक महत्वपूर्ण है पर कुछ भी संशोधित नहीं है this.propsसीधे , वे केवल कुछ आपूर्ति की कार्यप्रणाली को कॉल करके डेटा को संशोधित। (नोट: यह वास्तव में कैसे कुछ की तरह है <input onChange={this.handleChange} />काम करता है।)

कि कुछ भी दिलचस्प राज्य उत्परिवर्तन न किसी तरह का हो रहा है करता है किसी भी आवेदन कहीं ; बिंदु परिवर्तनशील राज्य से बचना है, लेकिन यह कम करने के लिए, या कम से कम इसे नियंत्रित और गुण किसी वस्तु पर, वे कुछ प्रदान की विधि कॉल को अद्यतन करने के बच्चे घटकों इसके बारे में संशोधन समझ में आता है-बजाय नहीं है।

प्रवाह दुकानों में परिवर्तनशील डेटा केंद्रीकृत, और केवल घटनाओं (ताकि घटकों राज्य परिवर्तनशील का कार्यान्वयन विवरण से decoupled कर रहे हैं) के माध्यम से है कि डेटा के संशोधन की अनुमति देता है, लेकिन गुण पारित करने के लिए आप के लिए मजबूर नहीं करता है: यह जहां प्रवाह पैटर्न चमक के लिए शुरू होता है लंबे घटक पदानुक्रम नीचे। जिसके अनुसार, पुन: प्रयोज्य घटकों के लिए, यह आमतौर पर घटक एक विशिष्ट अनुप्रयोग या प्रवाह कार्यान्वयन से जुड़ा नहीं है तो गुण के रूप में कार्य संदर्भ के साथ रहना सबसे अच्छा है।

07/03/2015 को 21:52
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more