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, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/14519349.html
未经授权禁止转载,违者必究!