टाइपप्रति प्रतिक्रिया कस्टम हुक रेफरी के लिए div तत्व

Question 1

संपादित करें: मैं सेटअप एक codesandbox: https://codesandbox.io/s/magical-poitras-yogur?file=/src/App.tsx

मैं कोशिश कर रहा हूँ बनाने के लिए एक कस्टम हुक करने के लिए div तत्व प्रतिक्रिया में घटना को जोड़ने के लिए श्रोताओं.

मैंने पाया कि यह 'सामान्य' समाधान:

function useMyCustomHook<T extends HTMLElement>{
    const myRef = useRef<T>(null)

    // do something with the ref, e.g. adding event listeners

    return {ref: myRef}
}

function MyComponent(){
    const {ref: myElementRef} = useMyCustomHook<HTMLDivElement>()

    return <div ref={myElementRef}>A Div</div>
}

से: असाइन नहीं किया जा सकता RefObject<HTMLDivElement> करने के लिए RefObject<HTMLElement> उदाहरण

जो मैं करने की कोशिश की है में लागू करने के लिए अपने कोड के नीचे. मैं खेल रहा हूँ चारों ओर एक घंटे के लिए और अंत में यह मिल गया नीचे करने के लिए केवल एक त्रुटि है, लेकिन मैं नहीं जानता कि कैसे इसे हल करने के लिए. त्रुटि में है मेरी useHover समारोह अभिव्यक्ति पर =. त्रुटि है: '(' expected.ts(1005)

मेरे कोड अब:

const Hooks = (props: any) => {
    const [hoverRef, hovered] = useHover();
    const style = {
        backgroundColor: hovered ? "red" : "",
    };

    return (
        <div ref={hoverRef} style={style}>
            <h1>Hooks!</h1>
        </div>
    );
};

                                          
const useHover:<HTMLDivElement extends HTMLElement> = () => {
                                      // ERROR HERE ^ the first equal sign. '(' expected.ts(1005)
    const [value, setValue] = useState(false);
    const ref = useRef<HTMLDivElement>(null);

    const handleMouseOver = () => setValue(true);

    useEffect(() => {
        const node = ref.current;
        if (node) {
            node.addEventListener("mouseover", handleMouseOver);

            return () => {
                node.removeEventListener("mouseover", handleMouseOver);
            }
        }
    }, []);

    return [ref, value];
};

किसी भी मदद की सराहना की है!

Question 2

इस प्रयास करें: का उपयोग कर के बजाय एक ref और imperatively छेड़छाड़ देशी डोम घटनाओं बनाने के लिए, तत्व विशेषताओं घटनाओं के लिए आप चाहते हैं संभाल करने के लिए, और बदले में उन लोगों के साथ उपयोग के लिए अपनी प्रतिक्रिया तत्व:

नोट: आप कर सकते हैं उपेक्षा और सीएसएस के पहले चार <script> तत्वों (वे सिर्फ वहाँ रहे हैं इतना है कि टाइपप्रति प्रतिक्रिया सिंटैक्स में काम करेंगे स्निपेट डेमो) ।

body {
  font-family: sans-serif;
}

.target {
  border: 1px solid;
  padding: 1rem;
}

<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script>
<script>Babel.registerPreset('tsx', {presets: [[Babel.availablePresets['typescript'], {allExtensions: true, isTSX: true}]]});</script>

<div id="root"></div>

<script type="text/babel" data-type="module" data-presets="tsx,react">

/**
 * The following line is here because this Stack Overflow snippet uses the
 * UMD module for React. In your code, you'd use the commented `import` lines
 * below it.
 */
const {useMemo, useState} = React;

// import {useMemo, useState} from 'react';
// import type {DetailedHTMLProps, HTMLAttributes, ReactElement} from 'react';

type HoverData<T extends HTMLElement> = {
  hoverProps: DetailedHTMLProps<HTMLAttributes<T>, T>;
  isHovered: boolean;
};

function useHover <T extends HTMLElement>(): HoverData<T> {
  const [isHovered, setIsHovered] = useState(false);

  const hoverProps: HoverData<T>['hoverProps'] = useMemo(() => ({
    onMouseEnter: () => setIsHovered(true),
    onMouseLeave: () => setIsHovered(false),
  }), [setIsHovered]);

  return {hoverProps, isHovered};
}

function Example (): ReactElement {
  const {hoverProps, isHovered} = useHover<HTMLDivElement>();

  return (
    <div>
      <h1>Hover the text below</h1>
      <div {...hoverProps} className="target">
        {isHovered ? 'Now move it away' : 'Move pointer here'}
      </div>
    </div>
  );
}

ReactDOM.render(<Example />, document.getElementById('root'));

</script>

jsejcksn · Answer 1 · 2021-11-29T06:48:48

इस प्रयास करें: का उपयोग कर के बजाय एक ref और imperatively छेड़छाड़ देशी डोम घटनाओं बनाने के लिए, तत्व विशेषताओं घटनाओं के लिए आप चाहते हैं संभाल करने के लिए, और बदले में उन लोगों के साथ उपयोग के लिए अपनी प्रतिक्रिया तत्व:

नोट: आप कर सकते हैं उपेक्षा और सीएसएस के पहले चार <script> तत्वों (वे सिर्फ वहाँ रहे हैं इतना है कि टाइपप्रति प्रतिक्रिया सिंटैक्स में काम करेंगे स्निपेट डेमो) ।

body {
  font-family: sans-serif;
}

.target {
  border: 1px solid;
  padding: 1rem;
}

<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script>
<script>Babel.registerPreset('tsx', {presets: [[Babel.availablePresets['typescript'], {allExtensions: true, isTSX: true}]]});</script>

<div id="root"></div>

<script type="text/babel" data-type="module" data-presets="tsx,react">

/**
 * The following line is here because this Stack Overflow snippet uses the
 * UMD module for React. In your code, you'd use the commented `import` lines
 * below it.
 */
const {useMemo, useState} = React;

// import {useMemo, useState} from 'react';
// import type {DetailedHTMLProps, HTMLAttributes, ReactElement} from 'react';

type HoverData<T extends HTMLElement> = {
  hoverProps: DetailedHTMLProps<HTMLAttributes<T>, T>;
  isHovered: boolean;
};

function useHover <T extends HTMLElement>(): HoverData<T> {
  const [isHovered, setIsHovered] = useState(false);

  const hoverProps: HoverData<T>['hoverProps'] = useMemo(() => ({
    onMouseEnter: () => setIsHovered(true),
    onMouseLeave: () => setIsHovered(false),
  }), [setIsHovered]);

  return {hoverProps, isHovered};
}

function Example (): ReactElement {
  const {hoverProps, isHovered} = useHover<HTMLDivElement>();

  return (
    <div>
      <h1>Hover the text below</h1>
      <div {...hoverProps} className="target">
        {isHovered ? 'Now move it away' : 'Move pointer here'}
      </div>
    </div>
  );
}

ReactDOM.render(<Example />, document.getElementById('root'));

</script>

टाइपप्रति प्रतिक्रिया कस्टम हुक रेफरी के लिए div तत्व

सवाल

सबसे अच्छा जवाब

अन्य भाषाओं में

यह पृष्ठ अन्य भाषाओं में है

इस श्रेणी में लोकप्रिय

लोकप्रिय सवाल इस श्रेणी में