0 
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 (

我如何解决它？id目的是在单击按钮时为必要的 div（classname='a1' 有一个 ）创建平滑的滚动动作。按钮必须平滑滚动以及触发toggle()。

任何帮助将不胜感激 ！

4

1 回答 1

2

Ken White 指出的错误是因为：

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按钮按下。当你按下它时，页面应该平滑滚动到Element带有特定name.

这是一个结合条件渲染和平滑滚动的简单示例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和状态。至少对于有条件地渲染你不需要超过一个状态。setScrollisActiveLink

沙盒示例

更新

如果您希望按钮滚动，则不需要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>
  );
}

沙盒示例

于 2021-04-28T10:01:24.183 回答