मेरे पास 2 लगभग समान घटक हैं जो विकल्पों की एक सरणी के माध्यम से मैप करते हैं और चेकबॉक्स या रेडियो बटन उत्पन्न करते हैं। घटकों के बीच एकमात्र अंतर बाल घटक है जिसे प्रस्तुत किया जाता है (या तो एक चेकबॉक्स या एक रेडियो इनपुट)।

मैं इन घटकों में डुप्लिकेट कोड को कम करना चाहता हूं लेकिन मुझे यकीन नहीं है कि इससे निपटने का सबसे अच्छा तरीका क्या है। मैं 2 घटकों को एक घटक जैसे FormControlGroup में समेकित कर सकता हूं और मुझे यह चुनने की अनुमति देने के लिए और अधिक प्रोप जोड़ सकता हूं कि क्या मैं या तो चेकबॉक्स या रेडियो बटन प्रदान करना चाहता हूं उदा। checkboxOrRadio, लेकिन इसका मतलब यह होगा कि अगर मैं चेकबॉक्स या रेडियो बटन के नए रूपांतरों जैसे CustomCheckbox को जोड़ता हूं तो मुझे इस घटक के प्रॉप्स पर विस्तार करना होगा।

<FormControlGroup
  label="Radio buttons"
  name="test"
  options=[{label: 'one', value: 1}, {label: 'two', value: 2}, {label: 'three', value: 3}]
  checkboxOrRadio="radio"
/>

क्या एक घटक को एक प्रोप के रूप में पारित करना संभव (और समझदार) है और घटक को मानचित्र फ़ंक्शन में प्रस्तुत किया गया है? यदि हां, तो मैं यह कैसे करूं? या क्या कोई और सुरुचिपूर्ण समाधान हैं? इस तरह मैं किसी भी घटक में पास कर सकता हूं जो मैं चाहता हूं और इसे प्रस्तुत किया जाएगा और key, name, label, onChange, value, checked प्रॉप्स इसे पास कर देंगे।

CheckboxGroup.js

import React from 'react';
import CheckboxInput from './CheckboxInput';

const CheckboxGroup = ({ label, name, options, onChange, children }) => {
  return (
    <div className="form-group form-inline">
      <span className="faux-label">{label}</span>

      {children}

      <div className="form-inline__field-container">
        {options &&
          options.map(option => (
            <CheckboxInput
              key={option.value}
              name={name}
              label={option.label}
              onChange={onChange}
              value={option.value}
              checked={option.value}
            />
          ))
        }
      </div>
    </div>
  );
};

export default CheckboxGroup;

RadioGroup.js

import React from 'react';
import RadioInput from './RadioInput';

const RadioGroup = ({ label, name, options, onChange, children }) => {
  return (
    <div className="form-group form-inline">
      <span className="faux-label">{label}</span>

      {children}

      <div className="form-inline__field-container">
        {options &&
          options.map(option => (
            <RadioInput
              key={option.value}
              name={name}
              label={option.label}
              onChange={onChange}
              value={option.value}
              checked={option.value}
            />
          ))
        }
      </div>
    </div>
  );
};

export default RadioGroup;
1
GuerillaRadio 28 मार्च 2018, 18:46

2 जवाब

मैं व्यक्तिगत रूप से इसे फॉर्मकंट्रोल ग्रुप घटक में नहीं बदलूंगा क्योंकि यह उस कोड में आसान बनाता है जहां आप घटक का उपयोग कर रहे हैं। तो आप जल्दी से जान सकते हैं कि चेकबॉक्स समूह बनाम रेडियो समूह क्या है।

इसे बदलने का मतलब यह होगा कि आप हर बार चेकबॉक्स ऑरराडियो प्रोप की जाँच करके देख सकते हैं कि आप वास्तव में कौन सा घटक बदल रहे थे।

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

0
Bradey Whitlock 28 मार्च 2018, 16:02

मेरे लिए एक बुरा विचार नहीं लगता। यह निश्चित रूप से संभव है, शायद यह सबसे सुंदर समाधान नहीं है, लेकिन मैं वर्तमान में नहीं देखता कि इसमें क्या गलत है।

0
Theo Wittkovskiy 28 मार्च 2018, 15:53