Q168828

by jun68ykt

HTML

<div id="app"></div>

CSS

span { font-size: 18pt; }

React

class FooTag extends React.Component {
  render() {
    return <span>This is a FooTag.</span>;
  }
}

class BarTag extends React.Component {
  render() {
  	return <span>This is a BarTag.</span>;
  }
}

class BazTag extends React.Component {
  render() {
    return <span>This is a BazTag.</span>;
  }
}

const tagComponents = {
  foo: FooTag,
  bar: BarTag,
  baz: BazTag,
};

class App extends React.Component {
  render() {
    const Tag = tagComponents[this.props.tag] || FooTag;
    return (
      <div className="app">
        <Tag />
      </div>
    );
  }
}

ReactDOM.render(<App tag="bar" />, document.querySelector("#app"));