SolidJS中点击按钮如何根据参数显示对应Modal窗口？

云原生阿岚

2026-8-21

问题分析与解决方案

你的代码点击无响应，主要是以下几个核心问题导致，附带优化方案：

1. 响应式状态未正确初始化

SolidJS 必须通过createSignal创建响应式状态，否则状态更新无法触发视图重渲染。你需要在组件顶部补充状态声明：

import { createSignal, Show } from 'solid-js';

function YourComponent() {
  const [open, setOpen] = createSignal(false);
  const [modalName, setModalName] = createSignal('');
  // 剩余代码...
}

2. 冗余代码与潜在大小写问题

你为每个平台单独写了<Modal>组件，既冗余又容易出现大小写匹配失误（比如'Github'和后续可能出现的'github'不匹配）。建议合并成一个动态Modal：

修正后的完整代码

import { createSignal, Show } from 'solid-js';
import { IconButton } from '@your-ui-lib'; // 替换为你的UI库
import { ImFacebook } from 'react-icons/im';
import { BsGithub } from 'react-icons/bs';
import Modal from './Modal';

function SocialModals() {
  const [open, setOpen] = createSignal(false);
  const [modalName, setModalName] = createSignal('');

  const openModal = (name) => {
    setModalName(name);
    setOpen(true);
  };

  return (
    <>
      <IconButton onClick={() => openModal('facebook')}>
        <ImFacebook class='h-6 w-6 text-blue-400' />
      </IconButton>

      <IconButton onClick={() => openModal('github')}>
        <BsGithub class='h-6 w-6' />
      </IconButton>

      <Show when={open()}>
        <Modal
          onClose={() => setOpen(false)}
          open={open()}
          title={`${modalName() === 'facebook' ? 'Facebook' : 'Github'} Users`}
        >
          <div className='px-4'>
            {modalName() === 'facebook' ? (
              <p>Facebook相关内容区域</p>
            ) : (
              <p>Github相关内容区域</p>
            )}
          </div>
        </Modal>
      </Show>
    </>
  );
}

export default SocialModals;