假设以下所有组件/ 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>
);
}
}
答案 0 :(得分: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});
}