React Slot All In One

React Slot All In One

slot

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

import FunnelChart from "./FunnelChart";
import Slot from "./Slot";

function App() {
  return (
    <div className="App">
      <FunnelChart title="xgqfrms">
        <Slot />
      </FunnelChart>
      <hr />
      <FunnelChart
        title="xgqfrms"
        template={title => <Slot title={title}/>}
        slot={<Slot />}
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

import React from "react";

const FunnelChart = (props) => {
  const { title, children, slot, template } = props;
  console.log(`template`, template);
  return (
    <>
      <span>slot parent component</span>
      <div>
        <h3>children slot</h3>
        {children}
        {slot}
        <br />
        {template && template(title)}
        {/* {
          <children title={title} />
        } */}
        {/* {
          slot(title)
        } */}
      </div>
    </>
  );
};

export { FunnelChart };

export default FunnelChart;

import React from "react";

const Slot = (props) => {
  const {
    title,
  } = props;
  const color = `${title ? "green" : "red"}`;
  return(
    <>
      <span style={{color}}>{title ? title : `default title`}</span>
    </>
  );
};

export {
  Slot,
};

export default Slot;

demo

https://codesandbox.io/s/react-slot-component-with-args-idhib?file=/src/index.js:0-532

refs

https://reactjs.org/docs/composition-vs-inheritance.html

https://www.cnblogs.com/xgqfrms/p/11730356.html

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---