feat[ptr]: React 通过 props.children 实现 Vue 插槽功能

具名插槽区分
1. 直接传对象
2. 函数对象属性
3. 直接传递一个 render 函数 => ( JSX )

Author: ceilf6

React/sandboxs/src/App.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import CoverButton from './test/CoverButton';
+
+const el = (
+    // 写在 组件中间{ }中的 会自动传入到 props.children
+    <CoverButton>
+        {{
+            default: <h1>default</h1>,
+            extra: <div>extra</div>
+        }}
+    </CoverButton>
+)
+
+
+const App = () => el
+export default App

React/sandboxs/src/components/Layout/Layout.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+function Layout({ children }) {
+  return <div>{children}</div>;
+}
+
+Layout.Header = function Header({ children }) {
+  return <header>{children}</header>;
+};
+
+Layout.Footer = function Footer({ children }) {
+  return <footer>{children}</footer>;
+};

React/sandboxs/src/components/Layout/test.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import Layout from './Layout'
+
+export default () => (
+  <Layout>
+    <Layout.Header>
+      <h1>Header</h1>
+    </Layout.Header>
+
+    <div>Main</div>
+
+    <Layout.Footer>
+      <p>Footer</p>
+    </Layout.Footer>
+  </Layout>
+)

React/sandboxs/src/index.js

@@ -23,7 +23,6 @@ import ReactDOM from 'react-dom';
 //     </>
 // )
 
-import StateInEvent from './test/StateInEvent';
 
 // import { Btn, MyBtn } from './test/Event';
 
@@ -51,10 +50,12 @@ import StateInEvent from './test/StateInEvent';
 //     </>
 // )
 
-import AppOldLifeCylcle from './test/AppOldLifeCylcle'
+// import AppOldLifeCylcle from './test/AppOldLifeCylcle'
 
-const el = (
-    <AppOldLifeCylcle />
-)
+// const el = (
+//     <AppOldLifeCylcle />
+// )
+
+import App from './App'
 
-ReactDOM.render(el, document.getElementById('root'))
+ReactDOM.render(<App />, document.getElementById('root'))

React/sandboxs/src/test/CoverButton.js

@@ -0,0 +1,12 @@
+import React from 'react'
+
+function CoverButton(props) {
+    return (
+        <div>
+            <button>{props.children.default}</button>
+            <h1>{props.children.extra}</h1>
+        </div>
+    )
+}
+
+export default CoverButton