反应动态标记名

Question

假设以下和所有组件/fus/fci/ssg只有一个带有站点道具的h1。我想了解为什么它是一个有效的react元素，但这些元素的渲染效果并不相同。一个有h1元素，另一个没有。其想法是不为不同站点创建带有切换的大型组件，每个站点将根据导航选择进行交换。我没有看到任何关于这方面的文件，除非我错过了。。。

{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-sitevalue），而不是组件引用。结果是这样的：

React.createElement("Fci");

与之相反：

React.createElement(Fci);

使用字符串将创建一个简单的HTML元素，而不是具有自己呈现内容的组件。

您可以创建这样的组件映射：

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

然后从字符串中可以解析组件引用：

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

或者您可以从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});
}