react-16(作用域)

import React from "react";
import ReactDOM from "react-dom/client";
import { styled } from "styled-components";

const root = ReactDOM.createRoot(document.getElementById("root"));

// 在使用组件的时候, 标签内部传入的内容, 会作为props.children属性传入到组件中
// 传入一个内容, 就是单个的内容, 传入多个内容, props.children就是一个数组

// React.cloneElement() 可以克隆一个元素, 克隆的过程中还可以给克隆的元素添加属性props
// 所以我们就可以把children给它克隆一下子, 克隆的时候给元素添加属性, 起到了作用域插槽的能力.

const StyledButton = styled.button`
  border-color: ${(props) => (props.isdark ? "#fff" : "#000")};
  color: ${(props) => (props.isdark ? "#fff" : "#000")};
  background-color: ${(props) => (!props.isdark ? "#fff" : "#000")};
`
const Button = (props) => {
  const { children, isDark } = props
  return (
    <StyledButton isdark={isDark}>{ children }</StyledButton>
  )
}

// 根据传入的isdark控制样式
const StyledHeaderContainer = styled.header`
  padding: 14px;
  border-bottom: 1px solid #ccc;
  display: flex; justify-content: space-between; align-items: center;
  background-color: ${props => props.isdark ? '#000' : '#fff'};
  color: ${props => !props.isdark ? '#000' : '#fff'};
  h3 {
    margin: 0;
  }
`
const AppHeader = (props) => {
  const { title, isDark, children } = props
  // 克隆出children中按钮组件, 并且给按钮组件添加属性 isDark
  const btns = children.map((item, i) => React.cloneElement(item, { isDark, key: i }))
  console.log(btns);
  return (
    <StyledHeaderContainer isdark={isDark}>
      <div className="left">
        <h3>{ title }</h3>
      </div>
      <div className="right">
        { btns }
      </div>
    </StyledHeaderContainer>
  )
}

const App = (props) => {
  const isDark = true
  return (
    <div>
      <AppHeader isDark={isDark} title="后台管理系统">
        <Button>登录</Button>
        <Button>联系我们</Button>
      </AppHeader>
    </div>
  )
}

root.render(<App />)