Question

如何设置渲染组件时应将其滚动到窗口顶部？我有一张桌子。呈现表格componenet时，它应该位于屏幕顶部而不是中间。这可能是在javascript中？但是如何使用React

function ManageProcess({ checkStatus, actions, form, signal }) {
  const [status, setStatus] = useState(initialState.checkStatus);

  window.scrollTo(0, 0);

  useEffect(() => {
    actions.setSubmitted();
    actions.resetChecks();
    actions.startCheck({
      ...constants.START_CHECK,
      dependent: constants.INITIAL_CHECK
    });

  }, []);

  useEffect(() => {
    if (form.submitted) {
      setStatus(checkStatus);
    } else {
      setStatus(initialState.checkStatus);
    }
  }, [checkStatus]);

  return (
    <div  className="container ">
      <Table responsive className="tablestyle">
        <thead>
          <tr>
            <th className="tdt1">Status</th>
            <th className="tdt2">Diagnostic Steps</th>
            <th>Result</th>
          </tr>
        </thead>
        <tbody>
          {status.length > 0 ? (
            status.map(element => {
              return (
                <CheckContainer
                  key={element.id}
                  status={element}
                  signal={signal}
                />
              );
            })
          ) : (
            <>nope</>
          )}
        </tbody>
      </Table>
    </div>
  );
}

Answer 1

const MyComponent = () => {
  window.scrollTo(0,0);
  return (
    <div>MyComponent</div>
  );
}

在反应中，您也可以尝试react-scroll

Answer 2

取决于您所说的“渲染”是什么意思。如果您想在每次渲染或重新渲染组件时都滚动到顶部，则应该在渲染功能中滚动到顶部

render() { window.scrollTo(0,0); // first argument is x-coordinate and second is y-coordinate return( // your JSX ) }

如果您使用函数而不是类，则在渲染之前执行此操作即可。

如果您想滚动到第一个挂载而不是随后的滚动，则可以滚动到componentDidMount方法内部的顶部

滚动到组件渲染的顶部

2 个答案: