Блог

Главная - Вопросы по программированию - Как управлять состоянием компонента функции в NextJS?

Как управлять состоянием компонента функции в NextJS?

#reactjs #next.js #react-state #react-state-management

Вопрос:

Я хочу получить доступ к переменной состояния компонента 1 в компоненте 2, это компоненты «братья». Как я могу это сделать? Только 1 переменная состояния. Я использую nextjs со стилизованными компонентами и машинописным текстом. Также мой проект имеет атомарную структуру дизайна. Я хочу сделать что-то вроде:

 const Component1 = (): ReactElement => {
  const [value, setValue] = useState(false);
  return(
    <div>Component 1 code</div>
  );
}

const ComponentRendered = (): ReactElement => {
  const [value, setValue] = useState(false);
  const [shouldRender, setShouldRender] = useState(false);
  
  const conditionalRendering = (component1Variable) => {
    setShouldRender(component1Variable);
  };

  const component2 = (
    <div>Component 2 code</div>
  )

  return {(shouldRender amp;amp; component2) || <></>};
}


//index.js

const Index = (): ReactElement => {
  return(
    <div>
      <ComponentRendered />
      <OtherComponents />
    </div>
  );
}

Комментарии:

1. Всегда ли условные компоненты отображаются на одной и той же странице/компоненте?

Ответ №1:

Если они являются компонентами brother, состояние должно управляться родительским компонентом и передаваться им в качестве реквизитов.

Я действительно не вижу в вашем примере, где вы используете компонент 1, но это может выглядеть примерно так:

 const Component1 = ({ value }): ReactElement => {
  return(
    <div>Component 1 code</div>
  );
}

const ComponentRendered = ({ value }): ReactElement => {
  const [shouldRender, setShouldRender] = useState(false);
  
  const conditionalRendering = (component1Variable) => {
    setShouldRender(component1Variable);
  };

  const component2 = (
    <div>Component 2 code</div>
  )

  return {(shouldRender amp;amp; component2) || <></>};
}


//index.js

const Index = (): ReactElement => {
  const [value, setValue] = useState(false);
  return(
    <div>
      <ComponentRendered value={value} />
      <Component1 value={value} />
    </div>
  );
}

Комментарии:

1. я действительно не думаю, что код, который он предоставил, — это родственные отношения

Ответ №2:

В зависимости от использования вы можете либо использовать простое общее состояние в родительском компоненте, либо реализовать поставщика контекста.

Основной пример общего состояния в родительском:

 import React, { useState } from "react";

interface Component1Props {
  value: string;
  handleValueChange: (value: string) => void;
}

const Component1 = ({ value, handleValueChange }: Component1Props) => {
  return (
    <div>
      Component 1 code. value: {value}
      <br />
      <button onClick={() => handleValueChange("Vader")}>Change</button>
    </div>
  );
};

interface Component2Props {
  value: string;
}

const Component2 = ({ value }: Component2Props) => {
  // create a guard to conditionally display
  if (value === "Anakin") {
    return <></>;
  }

  return (
    <div>
      Component 2 code. value: {value}
      <br />
    </div>
  );
};

export default function App() {
  // shared state
  const [value, setValue] = useState<string>("Anakin");

  return (
    <div className="App">
      <Component1 value={value} handleValueChange={setValue} />
      <Component2 value={value} />
    </div>
  );
}

Контекст реализации немного сложнее и лучше подходит для сценариев, в которых нескольким компонентам необходимо совместно использовать состояние и функциональность.

Вот базовая демонстрация использования контекста:

Метки: