当我单击反应中的按钮时如何调用另一个组件？答案

【问题标题】：How to call another component when I click a button in react?当我单击反应中的按钮时如何调用另一个组件？
【发布时间】：2019-12-27 19:27:52
【问题描述】：

我正在开发一个 react 项目，在这个项目中，我有一个 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>
    )
}

【问题讨论】：

标签： reactjs

【解决方案1】：

您可以保留一个状态来告诉何时有条件地渲染子组件。最初将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;

【讨论】：