如何在 React JS 中从另一个 function 返回自定义组件？

Question

这是我的first.js文件

import Second from "./second";

function ClickHandler() {
    return (
      <div>
        <Second></Second>
      </div>
    );
 }


function First() {

  return (
    <div>
      <div>This is first</div>

      <div>
        <button onClick={ClickHandler}>Click it</button>
      </div>
    </div>
  );
}
export default First;

这是我的second.js文件

function Second(){
    return(
        <div>
            <div>
                This is Second
            </div>
        </div>
    );
}
export default Second;

我想在单击按钮时显示second.js文件的内容。 但这没有按预期工作？ 有什么解决办法吗？ 请...

Answer 1

import React, { useState } from 'react'
import Second from "./second";



function First() {
 const [secondComponentVisibility, setSecondComponentVisibility] = 
 useState(false);

  const ClickHandler = () => {
    setSecondComponentVisibility(true)
  }
  
  return (
    <div>
      <div>This is first</div>

      <div>
        <button onClick={ClickHandler}>Click it</button>
      </div>

      {secondComponentVisibility && <Second/>}
    </div>
  );
}
export default First;

Answer 2

function First() {
   const [showSecond, setShowsecond] = useState(false);
  return (
   showSecond ? <SecondComponent/> : <div>
      <div>This is first</div>
      <div>
        <button onClick={()=>setShowsecond(true)}>Click it</button>
      </div>
    </div>
  );
}
export default First;

希望这会有所帮助

Answer 3

first.js

import React, { useState } from react

import Second from './second'

function First() {
    const [IsSecondShowing, SetIsSecondShowing] = useState(false)

    return (
        <div>
            <div>This is first</div>
            {IsSecondShowing ? <Second /> : null}
            <div>
                <button onClick={() => SetIsSecondShowing(prev => !prev)}>
                    Click it
                </button>
            </div>
        </div>
    )
}
export default First

second.js

import React from 'react'

function Second() {
    return (
        <div>
            <div>This is Second</div>
        </div>
    )
}
export default Second