const myState = {
users: [],
hospitals: []
}
const myReducer = (state = myState, action) => {
if( action.type === 'FETCH_DATA' ) {
return myState[action.storeType].concat(data)
}
return state
}
const fetchData = (url) => {
fetch(...).then(data => {
return {
type: "FETCH_DATA",
data: data.result,
storeType: data.type
}
})
}
import React, { Component } from 'react'
import { render } from 'react-dom'
class OkButton extends Component {
componentWillMount() {
const scriptOk = document.createElement('script')
scriptOk.innerHTML = `
!function (d, id, did, st, title, description, image) {
var js = d.createElement("script");
js.src = "https://connect.ok.ru/connect.js";
js.onload = js.onreadystatechange = function () {
if (!this.readyState || this.readyState == "loaded" || this.readyState == "complete") {
if (!this.executed) {
this.executed = true;
setTimeout(function () {
OK.CONNECT.insertShareWidget(id,did,st, title, description, image);
}, 0);
}
}};
d.documentElement.appendChild(js);
}(document,"ok_shareWidget","https://todayme.ru",'{"sz":30,"st":"oval","ck":1}',"","","");
`
document.head.append(scriptOk)
}
render() {
return <div id="ok_shareWidget"></div>
}
}
class App extends Component {
render() {
return <div>
OK example
<OkButton></OkButton>
</div>
}
}
render(
<App />,
document.querySelector('#mount_place')
)
constructor() {
super()
this.state = {
progressState: 0
}
}
componentDidMount() {
setTimeout(() => {
this.increaseProgress(10)
}, 1000)
}
increaseProgress(value) {
this.setState({ progressState: this.state.progressState + value })
}
render() {
return (
<div className="progress-loader" style={{ width: `${this.state.progressState}%` }}>Text</div>
)
}
appendYaMetrix() {
const yaDiv = document.createElement('div')
yaDiv.setAttribute('id', 'yandex_rtb_XXXXXX')
document.body.appendChild(yaDiv)
const yaScript = document.createElement('script')
yaScript.setAttribute('type', 'text/javascript')
yaScript.innerHTML = `(function(w, d, n, s, t) {
w[n] = w[n] || [];
w[n].push(function() {
Ya.Context.AdvManager.render({
blockId: "XXXXXX",
renderTo: "yandex_rtb_XXXXXXX",
horizontalAlign: false,
async: true
});
});
t = d.getElementsByTagName("script")[0];
s = d.createElement("script");
s.type = "text/javascript";
s.src = "//an.yandex.ru/system/context.js";
s.async = true;
t.parentNode.insertBefore(s, t);
})(this, this.document, "yandexContextAsyncCallbacks");`
document.head.appendChild(yaScript)
}
componentDidMount() {
this.appendYaMetrix()
}
map
подходит только для массивов.Object.keys(yourPropObject).map(item => {
return <p> {yourPropObject[item].title} </p>
})
npm i react-hot-loader@3.0.0-beta.6 --save-dev
selectNode(node) {
let nodeNew = Object.assign({}, node)
this.setState({selected_node: nodeNew});
}
import React, { Component } from 'react'
export default class TestPage extends Component {
constructor(props) {
super(props);
this.input = null
this.state = {
nodes: [
{ id: 1, content: "qwerty", edit: false },
{ id: 2, content: "abcdef", edit: false }
],
inputVal: ''
};
}
toggleEdit(id, isEdit) {
this.setState({
...this.state,
nodes: this.state.nodes.map(n => {
if( n.id === id ) {
n.edit = isEdit
}
return n
})
})
}
handleContent(event) {
....
}
render() {
return (
<div>
<table>
<thead>
<th>id</th>
<th>content</th>
<th>edit</th>
</thead>
<tbody>
{this.state.nodes.map((node) => {
if(node.edit) {
return <tr key={node.id}>
<td>{node.id}</td>
<td><input
onChange={this.handleContent.bind(this)}
ref={(input) => this.input = input}
value={this.state.inputVal}
/>
</td>
<td>
<button type="submit">save</button>
<button onClick={() => this.toggleEdit(node.id, false)}>cancel</button>
</td>
</tr>
} else {
return <tr key={node.id}>
<td>{node.id}</td>
<td>{node.content}</td>
<td><button onClick={() => this.toggleEdit(node.id, true)}>edit</button></td>
</tr>;
}
})}
</tbody>
</table>
</div>
);
}
};
class MyComponent extends Component {
constructor() {
super()
this.state = {
currentTheme: "dark"
}
}
changeTheme(themeName) {
this.setState({
currentTheme: themeName
})
}
render() {
return (
<div>
...
<button onClick={() => this.changeTheme("dark").bind(this)}> {/* байнд для доступа к this внутри ф-и */}
I wanna dark!
}
</button>
<button onClick={() => this.changeTheme("light").bind(this)}>
I wanna light!
</button>
</div>
)
}
}
onClick={() => this.props.goDark()} /* например это вызов из ребенка, который очень глубоко */
/* в это уже самый верхний (корневой) компонент */
goDark() { ... }
goLight() { ... }
<RootComponent>
<Child currentTheme={this.state.currentTheme} />
</RootComponent>
<div className={ this.props.currentTheme === 'dark' ? 'dark-wrapper' : 'light-wrapper' }>
<button className={this.props.currentTheme === 'dark' ? 'btn-primary-yellow' : 'btn-primary-blue' }></button>
</div>