如何将SolidJS的signal setter作为props传递给子组件？

你的问题出在传递setter时错误地调用了它，导致传给子组件的是undefined。直接修正代码即可：

import SetsImage from "./setsImage";

let App = () =>{
  let [img, setImg] = createSignal();

  return (
    <div>
      <UsesImage img={img()} />
      {/* 直接传递setImg函数引用，不要加()调用 */}
      <SetsImage setImg={setImg} />
    </div>
  );
}

原因说明： #

• setImg是Signal返回的 setter函数，你之前写的setImg()是调用这个函数，而setter调用后返回的就是undefined，这就是子组件拿到undefined的根源。正确的做法是直接传递函数本身，让子组件在需要时调用它。
• 关于props“只读”的描述：这里的只读是指子组件不能直接修改props的引用值，但父组件传递的是一个setter函数，子组件调用这个函数来修改父组件的状态是完全合规的——这是遵循单向数据流的正确方式，状态始终由父组件持有，子组件通过父组件提供的方法触发状态变更。

举个SetsImage子组件的使用示例：

// SetsImage.jsx
export default function SetsImage(props) {
  return (
    <button onClick={() => props.setImg("https://example.com/new-image.jpg")}>
      更新图片
    </button>
  );
}

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