Как я могу отобразить другой компонент из элемента HTML одного компонента в событии onClick?

//ChildComp.jsx

import NextElement from "./NextElement";

const AuxMenu = () => {
  
  const [element, setElement] = useContext(ElementContext);
  
  function changeState(e){
    setElement(e.target.innerText)
  } 
  
  return (
    <div onClick={(e)=>{changeState(e) && <NextElement />}}>Click me</div>
  );
};

export default AuxMenu;


//NextElement.jsx

imr
function NextElement(){
  return <button>Next Button</button>
}

Это действительно неправильный код, я просто хотел показать ссылку.

Запрос: при нажатии на div changeState() должен обновить имя элемента в состоянии , а затем он должен отобразиться в компоненте NextElement и заменить / удалить предыдущий компонент. (Что-то вроде того, что делает маршрутизатор React, но мое приложение представляет собой одностраничное приложение, поэтому у меня нет путей или ссылок для определения)

Отредактировано:

-1
Danav 4 Май 2021 в 00:49

3 ответа

Лучший ответ

Это то, что вы ищете.

Дайте знать, если у вас появятся вопросы.

//ChildComp.jsx
import NextElement from "./NextElement";

const AuxMenu = () => {
  
  const [showElement, setShowElement] = useState(false);
  
  function changeState(){
    setShowElement(!showElement)
  } 
  
  return (
    <>
      {!showElement && <div onClick={changeState}>
        Click me
      </div>}
      {showElement && <NextElement />}
    </>
  );
};

export default AuxMenu;


//NextElement.jsx
function NextElement(){
  return <button>Next Button</button>
}
1
fortunee 3 Май 2021 в 22:36

Как и в случае с React Router, вам необходимо определить маршруты или, в данном случае, шаги . Самый простой способ сделать это - создать компонент для каждого шага, например FirstStep, SecondStep и т. Д.

Затем создайте массив. Этот массив будет содержать функции, возвращающие компоненты шага. Порядок в массиве определяет порядок шагов.

// You'll have to create the components yourself.
import { FirstStep, SecondStep } from './components'; 

// Put them in an array.
const steps = [
  (props) => <FirstStep {...props} />,
  (props) => <SecondStep {...props />,
];

Теперь в вашем основном компоненте (AuxMenu) сохраните индекс, который отслеживает текущую позицию в шагах, начиная с 0.

Используйте этот индекс, чтобы выбрать компонент из массива steps и отобразить его.

Теперь, когда вы хотите перейти к следующему шагу, все, что вам нужно сделать, это увеличить текущую позицию в массиве. Итак, currentStep + 1 даст вам следующий шаг.

// The steps array.
import { steps } from './steps';

const AuxMenu = () => {
  const [currentStep, setCurrentStep] = useState(0);

  const hasNextStep = currentStep + 1 < steps.length;
  
  const nextStep = () => {
    if (hasNextStep) {
      setCurrentStep(currentStep => currentStep += 1);
    }
  };

  const StepComponent = steps[currentStep];
  
  return (
    <div>
      <StepComponent someprop={'hello'} />
      {hasNextStep && <button onClick={nextStep}>Next step</button>}
    <div/>
  );
};
1
Emiel Zuurbier 3 Май 2021 в 22:55

Трудно сказать, не видя, что находится внутри ElementContext, но похоже, что вы устанавливаете текст, который будет храниться в элементе.

Скажем, у вас есть 2 компонента A и B как таковые:

const A = () => {
  const [element, setElement] = useContext(ElementContext);
  return (
    <p onClick={() => setElement(“B”)}>Hello</p>
  )
}

const B = () => {
  return (
    <p>Goodby</p>
  )
}

И какой-то родительский компонент P как таковой:

const P = () => {
  const [element, setElement] = useContext(ElementContext);
  return (
    <>
      {element === ‘A’ ? <A /> : <B />}
    </>
  )
}

Родительский элемент сначала отобразит компонент A (при условии, что «A» является значением ElementContext по умолчанию) и B, если щелкнуть тег абзаца в A.

0
Leshawn Rice 3 Май 2021 в 22:06