xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

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}!`);
  }
}