मैं खुद को घोषणाओं का उपयोग करते हुए देखता हूं जैसे:

const [state, setState] = React.useState({value: ''});
    
return <InputComponent {...properties} value={state.value} onChange={(event) => setState({value: event.target.value || event.target.checked}

जब भी किसी घटक को राज्य की आवश्यकता होती है तो मुझे इसे फिर से लिखना पड़ता है और यह बिल्कुल भी पुन: प्रयोज्य नहीं लगता है। मैंने रेंडर प्रॉप्स और एचओसी की तलाश की, लेकिन राज्य का पुन: उपयोग नहीं कर सका।

मैंने बनाने की कोशिश की:

const StatefulInput = (InputComponent) => {

  const [state, setState] = React.useState({value: ''});

  return <InputComponent value={state.value} onChange={(event) => setState({value: event.target.value || event.target.checked />
}

लेकिन मैं पुन: उपयोग नहीं कर सका, मुझे 'अमान्य हुक' मिला, 'रेंडर प्राप्त वस्तु कुछ और नहीं' त्रुटियां और कुछ अन्य।

मैं यह कैसे कर सकता हूं? क्या इस हुक का पुन: उपयोग करना संभव है?

1
Lucas de Almeida Tonelli 7 नवम्बर 2020, 17:55

1 उत्तर

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

बॉयलरप्लेट से बचने के लिए, आप एक कस्टम हुक लिख सकते हैं जो राज्य को धारण करता है, एक मान और एक हैंडलर लौटाता है जिसे आप चाइल्ड कंपोनेंट को पास कर सकते हैं:

const InputComponent = ({ value, onChange }) => <input {...{value, onChange}} />;

const useInputValue = (initialValue) => {
  const [value, setValue] = React.useState(initialValue);
  return [
    value,
    event => setValue(event.target.value || event.target.checked)
  ];
};
const App = () => {
  const [inputValue, inputHandler] = useInputValue('');
    
  return <InputComponent
    value={inputValue}
    onChange={inputHandler}
  />
};
ReactDOM.render(<App />, document.querySelector('.react'));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class="react"></div>

या, कस्टम हुक एक ऐसी वस्तु लौटाता है जिसे चाइल्ड कंपोनेंट में फैलाया जा सकता है:

const InputComponent = ({ value, onChange }) => <input {...{value, onChange}} />;

const useInputValue = (initialValue) => {
  const [value, setValue] = React.useState(initialValue);
  return {
    value,
    onChange: event => setValue(event.target.value || event.target.checked)
  };
};
const App = () => {
  const inputProps = useInputValue('');
    
  return <InputComponent {...inputProps} />
};
ReactDOM.render(<App />, document.querySelector('.react'));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class="react"></div>

यह भी ध्यान रखें कि वस्तु होने के लिए useState में स्टेटफुल वैल्यू की कोई आवश्यकता नहीं है - यहां, क्योंकि आपको केवल एक स्ट्रिंग (वर्तमान मान) स्टोर करने की आवश्यकता है, आपके पास स्थिति हो सकती है किसी ऑब्जेक्ट में अनावश्यक रूप से स्ट्रिंग को लपेटने के बजाय बस वह स्ट्रिंग बनें।

3
CertainPerformance 7 नवम्बर 2020, 15:00