Javascript 在React中将引用从组件传递到组件_Javascript_Reactjs

Javascript 在React中将引用从组件传递到组件

javascript reactjs

Javascript 在React中将引用从组件传递到组件,javascript,reactjs,Javascript,Reactjs,所以我不确定通过裁判是否是最好的选择，但这正是我想要做的，告诉我是否有更好的选择所以我试着点击导航链接，向下滚动到div“contactForm” App.js import ContactForm from './components/ContactForm' import ParllaxPage from './components/ParllaxPage' import NavigationBar from './components/NavigationBar' import Reac

所以我不确定通过裁判是否是最好的选择，但这正是我想要做的，告诉我是否有更好的选择

所以我试着点击导航链接，向下滚动到div“contactForm”

App.js

import ContactForm from './components/ContactForm'
import ParllaxPage from './components/ParllaxPage'
import NavigationBar from './components/NavigationBar'
import React from 'react';
import './App.css';

const App = () => {


  return (

    < div cssClass="App" >
      <body>
        <span><NavigationBar /></span>
        <ParllaxPage cssClass="parallax-wrapper" />
        <ParllaxPage cssClass="parallax-wrapper parallax-pageOne" />
        <ContactForm />
      </body >
    </div >
  );
}

export default App;

从“./components/ContactForm”导入ContactForm
从“./components/ParllaxPage”导入ParllaxPage
从“./components/NavigationBar”导入导航栏
从“React”导入React；
导入“/App.css”；
常量应用=（）=>{
返回(

);
}
导出默认应用程序；

我试图使用forwardRef，但我不确定我是否正确，所以

NavigationBar.js

import ContactForm from "./ContactForm";
import React, { useRef } from "react";
import App from "../App";
import { Nav, Navbar, Form, FormControl, Button } from "react-bootstrap";

const ContactFormRef = React.forwardRef((props, ref) => (
 <ContactForm className="contactForm" ref={ref}>
  {props.children}
 </ContactForm>
));

const scrollToRef = (ref) => ref.current.scrollIntoView({ behavior: "smooth" });

const NavigationBar = () => {
 const ref = React.forwardRef(ContactFormRef);

 return (
  <Navbar bg="light" expand="lg">
   <Navbar.Brand href="#home">A1 Gutters</Navbar.Brand>
   <Navbar.Toggle aria-controls="b casic-navbar-nav" />
   <Nav className="mr-auto">
    <Nav.Link href="#home">Home</Nav.Link>
    <Nav.Link href="#link">Link</Nav.Link>
    <Nav.Link href="#" onClick={console.log(ref)}>
     Contact
    </Nav.Link>
   </Nav>
  </Navbar>
 );
};

export default NavigationBar;

从“/ContactForm”导入ContactForm；
从“React”导入React，{useRef}；
从“./App”导入应用程序；
从“react bootstrap”导入{Nav，Navbar，Form，FormControl，Button}；
const ContactFormRef=React.forwardRef（（道具，ref）=>(
{props.children}
));
constScrollToRef=（ref）=>ref.current.scrollIntoView（{行为：“平滑”}）；
常量导航栏=（）=>{
const ref=React.forwardRef（ContactFormRef）；
返回(
A1排水沟
家
链接
接触
);
};
导出默认导航栏；

我不认为其他文件真的需要显示，我只是想从ContactForm组件中获取类名，这样我就可以在单击时滚动到它。。我目前在onClick中只有一个console.log。

您应该用一个id标识div“contactForm”，并有一个指向它的锚标记：

<a href="#contactForm"></a>
<div id="contactForm"></div>

您可以在CSS中将

滚动行为：smooth

添加到正文中无需创建单独的

ContactFormRef

包装器。只需在

ContactForm

本身中使用

React.forwardRef

。那些没有通过裁判的人将不必知道它转发裁判

然后，记住将接收到的ref进一步传递给本机元素，或者使用

useImperialiveHandle

hook向其添加方法，而不进一步向下传递

const ref=React.forwardRef（ContactFormRef）

这是错误的

您应使用与本机组件相同的方法执行此操作：

const ref=useRef（）
返回
//等

您没有呈现ContactFormRef，因此参考点没有任何内容

App.js应该类似于：

。。。
常量应用=（）=>{
const mynestedref=React.useRef（）；
返回(
...
...
...
);
}
…

使用

钩子

将在这里简化

将状态变量用于

gotoContact

和ref用于

contactRef

添加导航链接的点击处理程序

联系人

添加useEffect钩子，当使用时，点击contact，ref可用（ref.current中的值），然后调用滚动查看）

从“/components/ContactForm”导入ContactForm；
从“/components/ParllaxPage”导入ParllaxPage；
从“React”导入React，{useState，useffect，useRef}；
导入“/App.css”；
常量导航栏=（{onClickContact}）=>{
返回(
A1排水沟
家
链接
onClickContact（）}>
接触
);
};
常量应用=（）=>{
const[gotoContact，setGotoContact]=useState（false）；
const contactRef=useRef（空）；
useffect（（）=>{
if（gotoContact&&contactRef.current）{
contactRef.current.scrollIntoView（）；
setGotoContact（假）；
}
}，[gotoContact，contactRef.current]；
返回(
setGotoContact（真）}/>
);
};
导出默认应用程序；

谢谢，我一按就可以让它正常工作，但它不是真正的“滚动”，但我确信我可以修复这些问题，导航栏消失了，但它就是这样，我可以找到一些解决办法。非常感谢。

import ContactForm from "./components/ContactForm";
import ParllaxPage from "./components/ParllaxPage";
import React, { useState, useEffect, useRef } from "react";
import "./App.css";

const NavigationBar = ({ onClickContact }) => {
  return (
    <Navbar bg="light" expand="lg">
      <Navbar.Brand href="#home">A1 Gutters</Navbar.Brand>
      <Navbar.Toggle aria-controls="b casic-navbar-nav" />
      <Nav className="mr-auto">
        <Nav.Link href="#home">Home</Nav.Link>
        <Nav.Link href="#link">Link</Nav.Link>
        <Nav.Link href="#" onClick={() => onClickContact()}>
          Contact
        </Nav.Link>
      </Nav>
    </Navbar>
  );
};

const App = () => {
  const [gotoContact, setGotoContact] = useState(false);
  const contactRef = useRef(null);

  useEffect(() => {
    if (gotoContact && contactRef.current) {
      contactRef.current.scrollIntoView();
      setGotoContact(false);
    }
  }, [gotoContact, contactRef.current]);

  return (
    <div cssClass="App">
      <body>
        <span>
          <NavigationBar onClickContact={() => setGotoContact(true)} />
        </span>
        <ParllaxPage cssClass="parallax-wrapper" />
        <ParllaxPage cssClass="parallax-wrapper parallax-pageOne" />
        <div ref={contactRef}>
          <ContactForm />
        </div>
      </body>
    </div>
  );
};

export default App;