如何在 onClick 事件反应 js 上从子级渲染其他组件？

Question

如何在 onClick 事件上从一个组件的 HTML 元素渲染另一个组件？

//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()应该更新state中的元素名称，然后它应该呈现给NextElement组件并替换/删除前一个组件。 （类似于 React 路由器的功能，但我的应用程序是单页应用程序，因此我没有要定义的路径或链接）

编辑：

Answer 1

这有点像你要找的东西。

如果您有任何问题，请告诉我。

//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>
}

Answer 2

与 React Router 一样，您需要定义您的路由，或者在本例中为steps 。 最简单的方法是为每个步骤创建一个组件，例如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 ）中，保留一个索引，以跟踪步骤中当前的 position，从0开始。

使用此索引 select 来自steps数组的组件并渲染它。

现在，当您想将 go 进行下一步时，您所要做的就是增加数组中的当前 position。 因此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/>
  );
};

Answer 3

如果没有看到 ElementContext 内部的内容，很难说，但看起来您正在将文本设置为存储在 element.xml 中。

假设您有 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 组件（假设“A”是 ElementContext 的默认值）和 B。