React+Tailwind CSS项目中Create按钮不显示问题求助

你的Create按钮不显示的核心原因是CreateButton组件从未被渲染到页面中——你的App.js里只包含了Modal的条件渲染，完全没有引入和渲染CreateButton组件。

修复步骤： #

1. 在App.js中导入CreateButton组件
2. 在App的返回内容中添加<CreateButton />

修改后的App.js代码如下：

import React, { useContext } from 'react';
import Modal from './components/Modal';
import CreateButton from './components/CreateButton'; // 新增导入
import GlobalContext from './context/GlobalContext';

function App() {
  const { showEventModal } = useContext(GlobalContext);

  return (
    <React.Fragment>
      <CreateButton /> {/* 新增渲染按钮 */}
      {showEventModal && <Modal />}
    </React.Fragment>
  );
}

export default App;

额外确认项： #

还要确保你的根组件（通常是index.js）中，App被正确包裹在ContextWrapper内部，否则CreateButton无法获取到GlobalContext的状态，点击按钮也不会触发Modal弹出。示例index.js代码如下：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import ContextWrapper from './context/ContextWrapper';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <ContextWrapper>
    <App />
  </ContextWrapper>
);

完成以上修改后，Create按钮就会正常显示，点击后也能触发Modal弹出。

内容的提问来源于stack exchange，提问作者SKs7