React具名插槽和作用域插槽

1.  
   // 插槽的使用，首先插槽是在 组件标签内部组合的 JSX 内容，进行传递
2.  
   // 因为 JSX 本身就是一个 类 js 对象， 插槽 直接使用 props.children 拿到了 JSX 直接渲染到页面
3.  
   // 在 React 中，可以使用一个数组或者对象，通过索引或者属性实现具名插槽
4.  
   // 函数式组件
5.  
   const Header = (props: {
6.  
   name: string;
7.  
   children: {
8.  
   blue: React.ReactNode;
9.  
   yellow: React.ReactNode;
10.  
    green: React.ReactNode;
11.  
    pink: React.ReactNode;
12.  
    };
13.  
    }) => {
14.  
    console.log(props.children)
15.  
    /*
16.  
    {
17.  
    blue: <h2 style={{ color: 'blue' }}>header的插槽</h2>,
18.  
    yellow: <h2 style={{ color: 'yellow' }}>header的插槽</h2>,
19.  
    green: <h2 style={{ color: 'green' }}>header的插槽</h2>,
20.  
    pink: <h2 style={{ color: 'pink' }}>header的插槽</h2>
21.  
    }
22.  
    */
23.  
    return (
24.  
    <div>
25.  
    <h2>{props.name}Header的h2</h2>
26.  
    {props.children.blue}
27.  
    </div>
28.  
    )
29.  
    }
30.  
    // 类组件
31.  
    class Content extends React.Component<any, any> {
32.  
    render (): React.ReactNode {
33.  
    console.log(this.props.children)
34.  
    {/*[<h2 style={{ color: 'red' }}>content的插槽</h2>,
35.  
    <h2 style={{ color: 'green' }}>content的插槽</h2>] */}
36.  
    return (
37.  
    <div>
38.  
    <h2>React {this.props.version} 版本开始就提供了 Hooks 编程！</h2>
39.  
    {this.props.children}
40.  
    {this.props.children[0]}
41.  
    </div>
42.  
    )
43.  
    }
44.  
    }
45.  
    const Footer = (props: { children: Function }) => {
46.  
    return (
47.  
    <>
48.  
    <footer>Footer的footer</footer>
49.  
    {
50.  
    props.children("作用域插槽数据")
51.  
    }
52.  
    </>
53.  
    )
54.  
    }
55.  
    class App extends React.Component<any, any>{
56.  
    render (): React.ReactNode {
57.  
    return (
58.  
    // JSX 语法必须要有一个 父元素，如果不需要标签占位，可以直接使用 <> 即可
59.  
    <>
60.  
    <Header name="Header的name ">
61.  
    {/* 具名插槽 */}
62.  
    {
63.  
    {
64.  
    blue: <h2 style={{ color: 'blue' }}>header的插槽</h2>,
65.  
    yellow: <h2 style={{ color: 'yellow' }}>header的插槽</h2>,
66.  
    green: <h2 style={{ color: 'green' }}>header的插槽</h2>,
67.  
    pink: <h2 style={{ color: 'pink' }}>header的插槽</h2>
68.  
    }
69.  
    }
70.  
    </Header>
71.  
    <Content version={16.8}>
72.  
    {/* 具名插槽，数组实现 */}
73.  
    {/* 如果插槽的数量为0，那么组件执行时获得的props.children是
74.  
    undefined，如果插槽的数量为1，则是该值，如果大于1，则是一个数组 */}
75.  
    <h2 style={{ color: 'red' }}>content的插槽</h2>
76.  
    <h2 style={{ color: 'green' }}>content的插槽</h2>
77.  
    </Content>
78.  
    <Footer>
79.  
    {/* 也可以是函数，
80.  
    因为在某些场景下插槽的内容可能想要同时使用父组件域内和子组件域内的数据。
81.  
    作用域插槽 */}
82.  
    {
83.  
    (v: string) => (<h2 style={{ color: 'green' }}>Footer的作用域插槽， {v}</h2>)
84.  
    }
85.  
    </Footer>
86.  
    </>
87.  
    )
88.  
    }
89.  
    }

运行结果：

这篇好文章是转载于：学新通技术网