我可以在Astro中从子组件传递props到父组件吗?

Question

请告诉我是否可以将子Astro组件的props传递给父组件?类似于React中的回调:

<Component callBack={arg=>{
//do something with arg
}} />

在Astro中是否有类似物?谢谢关注!

Answer 1

Props在Astro中只能向下流动，你所能做的最接近的事情就是将参数传递给slot函数

文档中的例子:

// src/components/Shout.astro
---
const message = Astro.props.message.toUpperCase();
---
{ Astro.slots.has('default') &&
<Fragment set:html={Astro.slots.render('default', [message])} />
}

// src/pages/index.astro
---
import Shout from "../components/Shout.astro";
---
<Shout message="slots!">
{(message) => <div>{message}</div>}
</Shout>

渲染成

<div>SLOTS!</div>

Answer 2

你不能从child组件传递道具到parent组件。如果你想把child组件的一些方法暴露给parent，你可以使用useImperativeHandle钩子。

function Form() {
const ref = useRef(null);
function handleClick() {
ref.current.focus();    // focus is method from `child
}
return (
<form>
<MyInput label="Enter your name:" ref={ref} />
<button type="button" onClick={handleClick}>
Edit
</button>
</form>
);
}
const MyInput = forwardRef(function MyInput(props, ref) {
const inputRef = useRef(null);
useImperativeHandle(ref, () => {
return {
focus() {
inputRef.current.focus();
},
scrollIntoView() {
inputRef.current.scrollIntoView();
},
};
}, []);
return <input {...props} ref={inputRef} />;
});

参考