反应动态标签名称

Question

假设以下和所有组件/fus/fci/ssg 只有一个带有站点道具的 h1。我想了解为什么它是一个有效的反应元素，但这些元素并没有显示同样的渲染。也就是说，一个有 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-site 值），而不是组件引用。所以它最终是这样的：

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