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 as Function 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://www.robinwieruch.de/react-pass-props-to-component#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的更多相关文章

  1. plupload上传控件错误exec(this.uid, component, action, args)

    plupload上传控件错误exec(this.uid, component, action, args) --undefined is not a function 原因:Flash元素隐藏后调用控 ...

  2. React & styled component

    React & styled component https://www.styled-components.com/#your-first-styled-component tagged t ...

  3. react hooks & component will unmount & useEffect & clear up

    react hooks & component will unmount & useEffect & clear up useEffect & return === u ...

  4. [React Fundamentals] Component Lifecycle - Updating

    The React component lifecycle will allow you to update your components at runtime. This lesson will ...

  5. [React Fundamentals] Component Lifecycle - Mounting Usage

    The previous lesson introduced the React component lifecycle mounting and unmounting. In this lesson ...

  6. [React Fundamentals] Component Lifecycle - Mounting Basics

    React components have a lifecycle, and you are able to access specific phases of that lifecycle. Thi ...

  7. [React] React Fundamentals: Component Lifecycle - Updating

    The React component lifecycle will allow you to update your components at runtime. This lesson will ...

  8. [React ] React Fundamentals: Component Lifecycle - Mounting Usage

    The previous lesson introduced the React component lifecycle mounting and unmounting. In this lesson ...

  9. [React] React Fundamentals: Component Lifecycle - Mounting Basics

    React components have a lifecycle, and you are able to access specific phases of that lifecycle. Thi ...

随机推荐

  1. memory barrier 内存屏障 编译器导致的乱序

    小结: 1. 很多时候,编译器和 CPU 引起内存乱序访问不会带来什么问题,但一些特殊情况下,程序逻辑的正确性依赖于内存访问顺序,这时候内存乱序访问会带来逻辑上的错误, 2. https://gith ...

  2. 20201103gryz模拟赛解题报告

    写在前面 昨天忘写了来补上 T1位运算乱搞一会没搞出来, 打完T4floyd暴力分之后发现T2树状数组可以骗点分 打完T3暴力手模了一遍样例之后发现T3就是个线段树板子 最后就非常愉快的拿到175pt ...

  3. pod资源限制和QoS探索

    简述 默认情况下,k8s不会对pod的资源使用进行限制,也就是说,pod可以无限使用主机的资源,例如CPU.内存等.为了保障k8s整体环境运行的稳定性,一般情况下,建议是对pod的资源使用进行限制,将 ...

  4. 十四:SpringBoot-配置MongoDB数据库,实现增删改查逻辑

    SpringBoot-配置MongoDB数据库,实现增删改查逻辑 1.MongoDB数据库 1.1 MongoDB简介 1.2 MongoDB特点 2.SpringBoot整合MongoDB 2.1 ...

  5. 编写高性能Java代码的最佳实践

    博客地址: http://blog.csdn.net/dev_csdn/article/details/79033972

  6. DEDECMS的20位MD5加密密文解密

    解密20位md5,20位md5加密算法.   dedecms的20位md5加密算噶是从32位md5中截取的20位,所以去掉前3位喝最后1位,即可获得16位md5值,即可破解15位md5.   例如:  ...

  7. NodeMCU学习笔记

    NodeMCU学习笔记 引脚连通 引脚 连通 D3 FLASH按键 D0 模组上的LED D4 芯片的LED FLASH按键 D3引脚已经与开发板上的FLASH按键开关连接 我们可以通过NodeMCU ...

  8. docker(7)docker-compose容器集群编排

    前言 实际工作中我们部署一个应用,一般不仅仅只有一个容器,可能会涉及到多个,比如用到数据库,中间件MQ,web前端和后端服务,等多个容器. 我们如果一个个去启动应用,当项目非常多时,就很难记住了,所有 ...

  9. windows下使用HyperV安装Centos7虚拟机

    以前都是用的VM(VMWare)安装虚拟机, 然鹅, 现在电脑装了Docker需要开启Windows的HyperV, 而我使用的VM版本(14)和HyperV 是不兼容的, 于是搜索引擎搜索了一下解决 ...

  10. 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 排序之后优先队 ...