//子组件
const Haizi = ({ children }) => {
console.log(children);
return (
<>
{children.foot}
{children.content}
{children.herder}
{children.scope(Math.random())}
</>)
}
//父组件
const RIndex = () => {
const handleclick = (value) => {
console.log(value);
}
return (
<Haizi>
{{
herder: <div>我是herder</div>,
content: <div>我是content</div>,
foot: <div>我是foot</div>,
scope: value => <button onClick={() => handleclick(value)}>作用域插槽</button>
}}
</Haizi>
)
}
export default RIndex
react 实现具名插槽和作用域插槽
最新推荐文章于 2024-05-24 09:26:12 发布