平滑滚动 + 触发功能与按钮的 OnClick

Question

import React, { useState, useRef } from "react";
import { Link, animateScroll as scroll } from "react-scroll";

function Acc(props) {
  const content = useRef(null);

  const [setActive, setActiveState] = useState("");
  const [setScroll, setScrollState] = useState();

  function toggle() {
    setActiveState(setActive === "" ? "active" : "");
    setScrollState(setScroll === "active" ? <Link to={id} smooth={true} duration={500} spy={true} exact={true}></Link> : );
  }

  return (
    <div className="a1" id={props.id}>
      <div className="a2">
        <div className="a3">
          <button className="button" onClick={toggle}>
            //image goes here
          </button>
        </div>
      </div>
    </div>
  );
}

export default Acc;

为什么会出现此错误？

./src/components/Acc.js
SyntaxError: /Users/me/Desktop/School/aapp/src/components/Acc.js: Unexpected token (24:121)

  23 |     setRotateState(setActive === "active" ? "icon" : "icon rotate");
> 24 |     setScrollState(setScroll === "active" ? <Link to={id} smooth={true} duration={500} spy={true} exact={true}></Link> : );
     |                                                                                                                          ^
  25 |   }
  26 |
  27 |   return (

我该如何解决？目的是在单击按钮时创建必要的 div（类名='a1'，其中有一个 id）的平滑滚动动作。该按钮必须平滑滚动并触发 toggle().

如有任何帮助，我们将不胜感激！

Answer 1

错误如是因为：

setScrollState(setScroll === "active" ? <Link to={id} smooth={true} duration={500}spy={true} exact={true}></Link> : );

滚动到问题所在行的末尾。

如果您使用的是三元语句，则需要在冒号左侧和右侧添加内容 :.

所以这样的事情是正确的：

setScrollState(
  setScroll === "active" ? (
    <Link to={id} smooth={true} duration={500} spy={true} exact={true}></Link>
  ) : null
);

不一定要 null，但你需要在那里放一些东西。

现在我不完全确定你想做什么，但从你的代码来看，你似乎想在按下按钮时有条件地呈现 Link。当您按下它时，页面应该平滑滚动到具有特定 name.

的 Element

这是一个结合了条件渲染和平滑滚动的简单示例 react-scroll:

import React, { useState, useRef } from "react";
import { Element, Link, animateScroll as scroll } from "react-scroll";

function Acc(props) {
  const [isActive, setIsActive] = useState(false);

  function toggle() {
    setIsActive(true);
  }

  return (
    <div className="a1" id={props.id}>
      <div className="a2">
        <div className="a3">
          <button className="button" onClick={toggle}>
            show link
          </button>
          {isActive && (
            <Link
              to="scroll-to-element"
              smooth={true}
              duration={500}
              spy={true}
              exact="true"
            >
              Link
            </Link>
          )}
        </div>
      </div>
    </div>
  );
}

export default function App() {
  return (
    <div className="App">
      <Acc />
      {[...Array(100).keys()].map((el) => {
        return (
          <Element key={el} name={el} className="element">
            {el}
          </Element>
        );
      })}
      <Element name="scroll-to-element" className="element">
        Scroll to element
      </Element>
    </div>
  );
}

我已将您的 setActive 和 setScroll 状态替换为单个 isActive 状态。至少对于有条件地渲染 Link 你不需要超过一个状态。

sandbox example

更新

如果您想让按钮滚动，则不需要 Link，您可以这样做：

import "./styles.css";
import React from "react";
import { Element, scroller } from "react-scroll";

function Acc(props) {
  function toggle(e) {
    scroller.scrollTo("scroll-to-element", {
      smooth: true,
      duration: 500,
      spy: true,
      exact: true
    });
  }

  return (
    <div className="a1" id={props.id}>
      <div className="a2">
        <div className="a3">
          <button className="button" onClick={toggle}>
            scroll
          </button>
        </div>
      </div>
    </div>
  );
}

export default function App() {
  return (
    <div className="App">
      <Acc />
      {[...Array(100).keys()].map((el) => {
        return (
          <Element key={el} name={el.toString()} className="element">
            {el}
          </Element>
        );
      })}
      <Element name="scroll-to-element" className="element">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ut
        vulputate lectus. Nam cursus semper mauris eget mattis. In nisl nibh,
        tempus quis lorem vitae, egestas imperdiet enim. Curabitur dictum libero
        nibh, ac tempus massa tincidunt elementum. Donec condimentum lacinia
        tortor in posuere. Quisque faucibus hendrerit nibh et convallis. Sed
        lacinia, massa id eleifend cursus, mi nulla sollicitudin dolor, eu
        posuere sapien nisi et sapien. Sed pellentesque lorem sed velit vehicula
        semper. Maecenas finibus, dolor hendrerit pulvinar feugiat, sem urna
        dictum magna, placerat dignissim est lorem vitae justo. Integer non nibh
        nulla.
      </Element>
    </div>
  );
}

sandbox example

平滑滚动 + 触发功能与按钮的 OnClick

Smooth Scroll + Trigger Function with OnClick of Button

function

button

reactjs

react-hooks

react-scroll