Прокрутите вверх на компонент рендера

Question

Как настроить, чтобы при визуализации компонента он прокручивался до верхней части окна? У меня есть стол. Когда составляется таблица компонентов, она должна доходить до верхней части экрана, а не посередине. Это возможно в 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>
  );
}

В реакции вы можете попробовать также Реакция-прокрутка

Answer 2

Зависит от того, что вы подразумеваете под «визуализацией».Если вы хотите прокручивать вверх каждый раз при рендеринге или повторном рендеринге компонента, вам следует прокрутить вверх в функции рендеринга

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

, если вы используете функции вместо классов, делая этов любом месте до того, как рендеринг выполнит эту работу.

Если вы хотите прокрутить первое монтирование, а не последующие, вы можете прокрутить вверх внутри componentDidMount method