मैं अनिवार्य रूप से एक घटक के लिए एक प्रोप कैसे जोड़ूं (घटक टैग का उपयोग किए बिना?)

जब मैं यह कोशिश करता हूं:

component.props.onChange = onChange;

मुझे निम्नलिखित त्रुटि मिलती है।

लेखन त्रुटि: वस्तु '#' की केवल संपत्ति 'onChange' पढ़ने के लिए असाइन नहीं कर सकता

संदर्भ के लिए मेरा कुछ और कोड यहां दिया गया है।

const getComponent = ( onChange, component, ) => {
  component.props.onChange = onChange; // this line throws the error
  return component;
}

const FormTemplate = ({ fields, onChange, }) => {
  // ...
  return (
    <div>
      {
        fields.map( ({ component, ...rest, }) =>
          ( component && (rest.type === 'component') )
          ?
          getComponent(onChange, component,)
          :
          getTextField(onChange, rest,)
        )
      }
    </div>
  );
}
const formFieldConfig = {
  zip: {
    type: 'component',
    label: 'Zip code',
    icon: 'place',
    component: <ZipCodeInput />,
  }, 
}
0
Let Me Tink About It 17 जुलाई 2019, 03:00

2 जवाब

सबसे बढ़िया उत्तर

जैसे त्रुटि कहती है, आप सीधे मिलने वाले प्रॉप्स को म्यूट नहीं कर सकते। एक घटक के प्रॉप्स को अपडेट करने का एकमात्र तरीका तत्व को क्लोन करना और क्लोन किए गए तत्व में प्रॉप्स को जोड़ना / अपडेट करना है।

const getComponent = ( onChange, component, ) =>
  React.cloneElement(component, { onChange })
2
Mowzer 17 जुलाई 2019, 04:21

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

const formFieldConfig = {
  zip: {
    type: 'component',
    label: 'Zip code',
    icon: 'place',
    component: ZipCodeInput, // <-- Don't create an element yet
  }, 
}

const FormTemplate = ({ fields, onChange, }) => {
  // ...
  return (
    <div>
      {
        fields.map(({ component, ...rest, }) => {
          const Component = (component && (rest.type === 'component'))
            ? component
            : textField // <-- Assuming this is also a React component

          return <Component onChange={onChange} {...rest} />
        })
      }
    </div>
  );
}

यह निश्चित रूप से जानना मुश्किल है कि यह कोड को देखे बिना टेक्स्टफिल्ड के साथ काम करेगा, लेकिन इसे getTextField के साथ भी काम करना मुश्किल नहीं होना चाहिए।

1
helloitsjoe 17 जुलाई 2019, 03:55