передать несколько ссылок на дочерние компоненты

Question

Перед тем, как погрузиться в основную проблему, я использую случай, когда пытаюсь выполнить прокрутку до нужного раздела. У меня будет навигация слева и список разделов формы относительно навигации справа. Navigation и Form Section являются дочерними компонентами. Вот как я структурировал свой код

Parent.js

const scrollToRef = ref => window.scrollTo(0, ref.current.offsetTop);

const Profile = () => {
  const socialRef = React.useRef(null);
  const smsRef = React.useRef(null);
  const handleScroll = ref => {
    console.log("scrollRef", ref);
    scrollToRef(ref);
  };
  return (
    <>
      <Wrapper>
        <Grid>
          <Row>
            <Col xs={12} md={3} sm={12}>
              <Navigation
                socialRef={socialRef}
                smsRef={smsRef}
                handleScroll={handleScroll}
              />
            </Col>
            <Col xs={12} md={9} sm={12}>
              <Form
                socialRef={socialRef}
                smsRef={smsRef}
              />
            </Col>
          </Row>
        </Grid>
      </Wrapper>
    </>
  );
};

Navigation.js(child component) Я пытался использовать forwardRef, но кажется, что он принимает только один аргумент в качестве ссылки, хотя у меня несколько ссылок.

const Navigation = React.forwardRef(({ handleScroll }, ref) => {
  // it only accepts on ref argument
  const items = [
    { id: 1, name: "Social connections", pointer: "social-connections", to: ref }, // socialRef
    { id: 2, name: "SMS preference", pointer: "sms", to: ref }, // smsRef
  ];
  return (
    <>
      <Box>
        <UL>
          {items.map(item => {
            return (
              <LI
                key={item.id}
                active={item.active}
                onClick={() => handleScroll(item.to)}
              >
                {item.name}
              </LI>
            );
          })}
        </UL>
      </Box>
    </>
  );
});

export default Navigation;

Form.js Я не имею представления о передаче нескольких ссылок при использовании forwardRef, поэтому для раздела формы я передал ссылки как простую передачу реквизита.

const Form = ({ socialRef, smsRef }) => {
  return (
    <>
      <Formik initialValues={initialValues()}>
        {({ handleSubmit }) => {
          return (
            <form onSubmit={handleSubmit}>
              <Social socialRef={socialRef} />
              <SMS smsRef={smsRef} />
            </form>
          );
        }}
      </Formik>
    </>
  );
};

Социальные. js

const Social = ({ socialRef }) => {
  return (
    <>
      <Row ref={socialRef}>
        <Col xs={12} md={3}>
          <Label>Social connections</Label>
        </Col>
        <Col xs={12} md={6}></Col>
      </Row>
    </>
  );
};

Может ли кто-нибудь помочь мне в передаче нескольких ссылок, поэтому при нажатии на конкретный элемент навигации, он должен прокрутить меня до соответствующего компонента (раздел ).

Answer 1

Я добавил пример ниже. Я не проверял это. Это просто идея.

import React, { createContext, useState, useContext, useRef, useEffect } from 'react'

export const RefContext = createContext({});

export const RefContextProvider = ({ children }) => {
    const [refs, setRefs] = useState({});

    return <RefContext.Provider value={{ refs, setRefs }}>
        {children}
    </RefContext.Provider>;
};

const Profile = ({ children }) => {
    // ---------------- Here you can access refs set in the Navigation
    const { refs } = useContext(RefContext);
    console.log(refs.socialRef, refs.smsRef);

    return <>
        {children}
    </>;
};

const Navigation = () => {
    const socialRef = useRef(null);
    const smsRef = useRef(null);
    const { setRefs } = useContext(RefContext);

    // --------------- Here you add the refs to context
    useEffect(() => {
        if (socialRef && smsRef) {
            setRefs({ socialRef, smsRef });
        }
    }, [socialRef, smsRef, setRefs]);

    return <>
        <div ref={socialRef}></div>
        <div ref={smsRef}></div>
    </>
};


export const Example = () => {
    return (
        <RefContextProvider>
            <Profile>
                <Navigation />
            </Profile>
        </RefContextProvider>
    );
};