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

反应动态标签名称

1 个答案: