当我在 React 中单击按钮时如何调用另一个组件？

Question

我正在做一个反应项目，在这个项目中我有 App.js，我有一个按钮。 我还有另一个组件是 Child.js。 在 Child.js 我有一个段落标签。

现在，当我单击 App.js 中的按钮时，我必须显示段落标签，该段落标签属于 Child.js 组件。

这是 App.js

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <button className='btn btn-primary'>Click here</button>
    </div>
  );
}

export default App;

这是 Child.js

import React from 'react';
import './Child.css';

export default function Child() {
    return (
        <div>
            <p>Hi Mark</p>
        </div>
    )
}

Answer 1

你可以保持一个状态来告诉何时有条件地渲染子组件。 showChildComp将showChildComp设置为false ，然后在单击按钮时，您可以通过处理函数onBtnClick切换showChildComp的值。 请参阅以下代码以了解该想法。

没有太多关于你正在做什么的背景，这是我可以给你的唯一想法/建议。

import React, {useState} from 'react';
import './App.css';

function App() {
  const [showChildComp, setShowChildComp] = useState(false)
  const onBtnClick = e => {
    e.preventDefault()
    setShowChildComp(prevState => !prevState)
  }
  return (
    <div className="App">
      <button className='btn btn-primary' onClick={onBtnClick}>Click here</button>
      {showChildComp && <Child /> }
    </div>
  );
}

export default App;