Question

我正在做一个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>
    )
}

Answer 1

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

在您所做工作的上下文中，这是我能给您的唯一想法/建议。

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;

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

1 个答案: