React動的タグ名

Question

以下を仮定すると、/ fus/fci/ssgのすべてのコンポーネントは、サイトpropsを持つ単一のh1を持ちます。私はなぜそれが有効な反応要素であるのか理解したいと思いますが、これらは同じように表示されません。つまり、h1要素があり、もう一方はh1要素がありません。アイデアは、異なるサイトのトグルを持つ大きなコンポーネントを作成しないことでした。各サイトは、nav pickに基づいてスワップアウトされます。私はこの問題は、あなたが要素を作成するとき、あなたはある

{this.state.renderSite} 
<Fci site="Fci"/> 

import React from 'react';             
import styles from './App.css';            
import Nav from '../components/Nav.js'          
import Fus from '../components/Fus.js'          
import Fci from '../components/Fci.js'          
import Ssg from '../components/Ssg.js'          

export default class App extends React.Component {       
    constructor(props) {              
    super(props);               
    this.state = {renderSite: '', site: 'default' };      
    this.pickSite = this.pickSite.bind(this);        
    }                   

    pickSite(site){               
    this.setState({renderSite: React.createElement(site, {"site":site})}); 
    this.setState({site: site});           
    console.log(React.isValidElement(this.state.renderSite));    
}                   

    render() {                
    return (                
     <div className={styles.app}>           
     <Nav site={this.pickSite.bind(this)} /> 
     {this.state.renderSite}     
     <Fci site="Fci"/>              
     </div>                
    );                  
    }                   
}                   

...ナビ

import React from 'react'; 

export default class Nav extends React.Component { 
     constructor(props) { 
      super(props); 
      this.update = this.update.bind(this); 
     } 

     update(e) { 
      this.props.site(e.target.dataset.site); 
     } 

     render(){ 
      return ( 
       <div> 
        <button onClick={this.update} data-site="Ssg"> SSG </button> 
        <button onClick={this.update} data-site="Fci"> FCI </button> 
        <button onClick={this.update} data-site="Fus"> FUS </button> 
       </div> 
        ); 
     }  
} 

Answer 1

を、私はそれを逃した場合を除き、このために文書化され何も表示されません。コンポーネント参照ではなく文字列（data-siteの値）を渡します。だから、それはこのように終わる：とは対照的に

React.createElement("Fci"); 

：

React.createElement(Fci); 

文字列を使用すると、単純なHTML要素ではなく、独自のレンダリングされたコンテンツとを持つコンポーネントを作成します。

次のようなコンポーネントマップ作成できます。

React.createElement(componentMap[site], {site: site}); 

---

それとも、あなたからコンポーネントの参照を渡すことができます。あなたはコンポーネントの参照を解決することができ、あなたの文字列から次に

const componentMap = { 
    "Fci": Fci, 
    "Fus": Fus, 
    "Ssg": Ssg 
} 

をNav：

<button onClick={this.update.bind(this, Ssg, "Ssg"}> SSG </button> 

update(component, site, e) { 
    this.props.site(component, site); 
} 

pickSite(component, site) { 
    React.createElement(component, {site: site}); 
}