React组件不响应computed信号，count>2提示无法显示求助

你的问题出在访问computed信号的.value属性做条件渲染这一步。

在@preact/signals-react中，JSX里直接使用信号对象（比如count或countIsMoreThanTwo）时，框架会自动建立响应式订阅，信号更新会触发组件重新渲染并同步内容。但手动访问.value只会获取当前静态值，不会建立订阅关系——这就导致count超过2时，countIsMoreThanTwo的更新无法触发条件判断的重新执行，所以提示消息始终不显示。

修复方法 #

去掉条件判断里的.value，直接使用信号对象：

{countIsMoreThanTwo && <h2>More than 2</h2>}

注意：console.log里使用.value是没问题的，因为那是组件初始化时的一次性取值；但JSX渲染逻辑必须依赖信号对象本身来维持响应式。

修复后的完整代码：

import React from 'react';
import { signal, computed } from '@preact/signals-react';

const App: React.FC = () => {
  const count = signal<number>(0);
  const countIsMoreThanTwo = computed<boolean>(() => count.value > 2);

  console.log('CHECKS:', count.value, countIsMoreThanTwo.value);

  return (
    <>
      <h1>Vite + React</h1>
      {countIsMoreThanTwo && <h2>More than 2</h2>}
      <h3>Count is more than two: { countIsMoreThanTwo }</h3>
      <button onClick={() => count.value++}>
        count is { count }
      </button>
    </>
  )
}
export default App;

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