あなたが正しく理解している限り、現在アクティブなタブに応じて異なるコンテンツを表示できるように、モーダルウィンドウ内にタブ付きインターフェイスを作成しようとします。私はその問題のために次の解決策を見ることができます。
まず、我々はModal
コンポーネントとそのコンテンツを保持する基本的なコンポーネントを作成:上記(div
)それぞれの子
class App extends React.Component {
render() {
return (
<Modal>
<div>The content of the first tab</div>
<div>The content of the second tab</div>
<div>The content of the third tab</div>
</Modal>
);
}
}
をコンポーネントはModal
内の各タブの内容を表しています。
今度はModal
コンポーネント自体を作成してみましょう:
class Modal extends React.Component {
constructor(props) {
super(props);
this.state = {
tabIndex: 0
};
}
switchTabs(tabIndex) {
this.setState({
tabIndex
});
}
render() {
return (
<div>
<button onClick={this.switchTabs.bind(this, 0)}>1</button>
<button onClick={this.switchTabs.bind(this, 1)}>2</button>
<button onClick={this.switchTabs.bind(this, 2)}>3</button>
<div>
{React.Children.map(this.props.children, (child, index) =>
index === this.state.tabIndex && child
)}
</div>
</div>
)
}
}
私たちは、コンポーネントのローカル状態の一部として、アクティブなタブ(tabIndex
)のインデックスを保持します。これらのタブを切り替える3つのボタンも表示されます。
最後に、React.Children.map
を使用してコンポーネントの子を反復処理し、index
が現在のtabIndex
に対応する子を表示します。
次のスニペットを試してください。条件に基づいて、2つのモーダルと表示/非表示を使用しないのはなぜ
class Modal extends React.Component {
constructor(props) {
super(props);
this.state = {
tabIndex: 0
};
}
switchTabs(tabIndex) {
this.setState({
tabIndex
});
}
render() {
return (
<div>
<button onClick={this.switchTabs.bind(this, 0)}>1</button>
<button onClick={this.switchTabs.bind(this, 1)}>2</button>
<button onClick={this.switchTabs.bind(this, 2)}>3</button>
<div>
{React.Children.map(this.props.children, (child, index) =>
index === this.state.tabIndex && child
)}
</div>
</div>
)
}
}
class App extends React.Component {
render() {
return (
<Modal>
<div>
<img src="https://avatars2.githubusercontent.com/u/4226954?v=3&s=400" height="200" />
</div>
<div style={{ height: '200px', width: '200px', marginTop: '5px' }}>The second tab</div>
<div>
<img src="https://avatars3.githubusercontent.com/u/810671?v=3&s=400" height="200" />
</div>
</Modal>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
? – Manikandan
2つ以上のモーダルが存在する可能性があるので...私は今は知りませんが、5 +前後になる可能性があります。 –
'var Numpad =