import React from "react";
import ReactDOM from "react-dom";
const items = [
{ title: "London", content: "London is the capital city of England." },
{ title: "Paris", content: "Paris is the capital of France." },
{ title: "Tokyo", content: "Tokyo is the capital of Japan." }
];
class TabContent extends React.Component {
render() {
return (
<div className="tabcontent">
<h3>{this.props.title}</h3>
<p>{this.props.content}</p>
</div>
);
}
}
class Tabs extends React.Component {
state = {
active: 0
};
openTab = e => {
this.setState({
active: +e.target.dataset.index
});
};
render() {
return (
<div>
<div className="tab">
{this.props.items.map((n, i) => (
<button
className={`tablinks ${i === this.state.active ? "active" : ""}`}
onClick={this.openTab}
data-index={i}
>
{n.title}
</button>
))}
</div>
{this.props.items[this.state.active] && (
<TabContent {...this.props.items[this.state.active]} />
)}
</div>
);
}
}
ReactDOM.render(<Tabs items={items} />, document.getElementById("root"));import React from "react";
import ReactDOM from "react-dom";
import { createStore } from "redux";
import { Provider, connect } from "react-redux";
// здесь описание вышеприведенных компонентов ...
// для трансформации текущего redux-store в props компонента
const mapStateToProps = state => {
return {
items: state.items
}
}
// для трансформации текущих redux-dispatch в props компонента
const mapDispatchToProps = dispatch => {
return {
addItem: {title, content} => {
dispatch(addItem({title, content}));
},
// ...
}
}
const TabsWithRedux = connect(mapStateToProps, mapDispatchToProps)(Tabs);
// -----------
// redux-store
// -----------
// начальный state
const initialState = {
items: [
{ title: "London", content: "London is the capital city of England." },
{ title: "Paris", content: "Paris is the capital of France." },
{ title: "Tokyo", content: "Tokyo is the capital of Japan." }
]
};
// создадим, к примеру, функционал добавления нового item
const ADD_ITEM = "ADD_ITEM";
// экшн
const addItem = item => {
return {
type: ADD_ITEM,
payload: item
};
};
// рутовый редьюсер
const rootReducer = (state = initialState, {type, payload} => {
switch (type) {
case ADD_ITEM:
return {
items: [...state.items, payload]
}
default:
return state
}
});
// основной стор
const store = createStore(rootReducer);
// рендер
ReactDOM.render(
<Provider store={store}>
<TabsWithRedux items={items} />
</Provider>,
document.getElementById("root")
);
Простой
Средний
