以下を仮定すると、/ fus/fci/ssgのすべてのコンポーネントは、サイトpropsを持つ単一のh1を持ちます。私はなぜそれが有効な反応要素であるのか理解したいと思いますが、これらは同じように表示されません。つまり、h1要素があり、もう一方はh1要素がありません。アイデアは、異なるサイトのトグルを持つ大きなコンポーネントを作成しないことでした。各サイトは、nav pickに基づいてスワップアウトされます。私はこの問題は、あなたが要素を作成するとき、あなたはあるReact動的タグ名
{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>
);
}
}
'Nav'コンポーネントを投稿できますか? – Aaron
@AaronがNavコンポーネントを追加しました – JustDave