react slot component with args
react slot component with args
how to pass args to react props child component
https://codesandbox.io/s/react-slot-component-with-args-n11d1
OK
https://codesandbox.io/s/react-slot-component-with-args-idhib
function component, pass
slot child component
asFunction props
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>
{
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;
props.children
https://reactjs.org/docs/composition-vs-inheritance.html
function Dialog(props) {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">
{props.title}
</h1>
<p className="Dialog-message">
{props.message}
</p>
{props.children}
</FancyBorder>
);
}
class SignUpDialog extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.handleSignUp = this.handleSignUp.bind(this);
this.state = {login: ''};
}
render() {
return (
<Dialog title="Mars Exploration Program"
message="How should we refer to you?">
<input value={this.state.login}
onChange={this.handleChange} />
<button onClick={this.handleSignUp}>
Sign Me Up!
</button>
</Dialog>
);
}
handleChange(e) {
this.setState({login: e.target.value});
}
handleSignUp() {
alert(`Welcome aboard, ${this.state.login}!`);
}
}
How to pass data to props.children
https://frontarm.com/james-k-nelson/passing-data-props-children/
How to pass props to {this.props.children}
https://stackoverflow.com/questions/32370994/how-to-pass-props-to-this-props-children
how-to-pass-props-from-child-to-parent-component
https://medium.com/better-programming/passing-data-to-props-children-in-react-5399baea0356
vue slot
https://www.cnblogs.com/xgqfrms/p/11218372.html
Web Components & HTML template & HTML slot
https://www.cnblogs.com/xgqfrms/p/10979925.html
refs
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
react slot component with args的更多相关文章
- plupload上传控件错误exec(this.uid, component, action, args)
plupload上传控件错误exec(this.uid, component, action, args) --undefined is not a function 原因:Flash元素隐藏后调用控 ...
- React & styled component
React & styled component https://www.styled-components.com/#your-first-styled-component tagged t ...
- react hooks & component will unmount & useEffect & clear up
react hooks & component will unmount & useEffect & clear up useEffect & return === u ...
- [React Fundamentals] Component Lifecycle - Updating
The React component lifecycle will allow you to update your components at runtime. This lesson will ...
- [React Fundamentals] Component Lifecycle - Mounting Usage
The previous lesson introduced the React component lifecycle mounting and unmounting. In this lesson ...
- [React Fundamentals] Component Lifecycle - Mounting Basics
React components have a lifecycle, and you are able to access specific phases of that lifecycle. Thi ...
- [React] React Fundamentals: Component Lifecycle - Updating
The React component lifecycle will allow you to update your components at runtime. This lesson will ...
- [React ] React Fundamentals: Component Lifecycle - Mounting Usage
The previous lesson introduced the React component lifecycle mounting and unmounting. In this lesson ...
- [React] React Fundamentals: Component Lifecycle - Mounting Basics
React components have a lifecycle, and you are able to access specific phases of that lifecycle. Thi ...
随机推荐
- memory barrier 内存屏障 编译器导致的乱序
小结: 1. 很多时候,编译器和 CPU 引起内存乱序访问不会带来什么问题,但一些特殊情况下,程序逻辑的正确性依赖于内存访问顺序,这时候内存乱序访问会带来逻辑上的错误, 2. https://gith ...
- 20201103gryz模拟赛解题报告
写在前面 昨天忘写了来补上 T1位运算乱搞一会没搞出来, 打完T4floyd暴力分之后发现T2树状数组可以骗点分 打完T3暴力手模了一遍样例之后发现T3就是个线段树板子 最后就非常愉快的拿到175pt ...
- pod资源限制和QoS探索
简述 默认情况下,k8s不会对pod的资源使用进行限制,也就是说,pod可以无限使用主机的资源,例如CPU.内存等.为了保障k8s整体环境运行的稳定性,一般情况下,建议是对pod的资源使用进行限制,将 ...
- 十四:SpringBoot-配置MongoDB数据库,实现增删改查逻辑
SpringBoot-配置MongoDB数据库,实现增删改查逻辑 1.MongoDB数据库 1.1 MongoDB简介 1.2 MongoDB特点 2.SpringBoot整合MongoDB 2.1 ...
- 编写高性能Java代码的最佳实践
博客地址: http://blog.csdn.net/dev_csdn/article/details/79033972
- DEDECMS的20位MD5加密密文解密
解密20位md5,20位md5加密算法. dedecms的20位md5加密算噶是从32位md5中截取的20位,所以去掉前3位喝最后1位,即可获得16位md5值,即可破解15位md5. 例如: ...
- NodeMCU学习笔记
NodeMCU学习笔记 引脚连通 引脚 连通 D3 FLASH按键 D0 模组上的LED D4 芯片的LED FLASH按键 D3引脚已经与开发板上的FLASH按键开关连接 我们可以通过NodeMCU ...
- docker(7)docker-compose容器集群编排
前言 实际工作中我们部署一个应用,一般不仅仅只有一个容器,可能会涉及到多个,比如用到数据库,中间件MQ,web前端和后端服务,等多个容器. 我们如果一个个去启动应用,当项目非常多时,就很难记住了,所有 ...
- windows下使用HyperV安装Centos7虚拟机
以前都是用的VM(VMWare)安装虚拟机, 然鹅, 现在电脑装了Docker需要开启Windows的HyperV, 而我使用的VM版本(14)和HyperV 是不兼容的, 于是搜索引擎搜索了一下解决 ...
- 2018-2019 ACM-ICPC, NEERC, Southern Subregional Contest, Qualification Stage(11/12)
2018-2019 ACM-ICPC, NEERC, Southern Subregional Contest, Qualification Stage A. Coffee Break 排序之后优先队 ...