将多个引用传递给子组件

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，但似乎它只接受一个参数作为 ref，尽管我有多个 ref。

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 时传递多个 refs，因此对于表单部分，我将 refs 作为简单的 props 传递传递。

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>
    );
};