let unlisten = history.listen(location => {
console.log(location.state); // <-- переданный в Link state.
})
<Link to="some" hash="#idOfElement" >Scroll to</Link>
let unlisten = history.listen(location => {
console.log(location.hash); // <-- переданный в Link hash.
})
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['geochart'], callback: drawVisualization});
function drawVisualization() { ... }
</script>
function drawVisualization(element, commonData, regionData) {
console.log('elemet', element);
var data = google.visualization.arrayToDataTable(commonData);
var mapVisualization = new google.visualization.GeoChart(element);
mapVisualization.draw(data, regionData);
}
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['geochart']});
</script>
class MapVisualization {
componentDidMount() {
this.drawMap();
}
componentDidUpdate() {
this.drawMap();
}
drawMap() {
drawVisualization(this.refs.mapDiv.getDOMNode(), this.props.commonData, this.props.data);
}
render() {
return (
<div ref="mapDiv" />
);
}
};
render() {
var list = this.props.data.map(function(d, i) { return <button type = "button" className = { 'tab' + (i === this.state.current ? ' active' : '') } key = { 'tab-' + i } onClick = { this.handleClick.bind(this, i) }>{d.title}</button>
}.bind(this));
const { commonData, data } = this.props;
const { current } = this.state;
return (
< div className = 'container' >
<div className='col-12'>
{list}
<div className = 'map'>
<MapVisualization data={data[current].content} commonData={commonData} />
</div>
</div>
</div>
);
}
folders: {
'123': {
id: 123,
name: 'Inbox',
isSelected: false,
parentId: 123,
visible: false,
},
}
function folder(action, state = initialState) {
switch(action.type) {
case OPEN_FOLDER_ACTION:
const nextFolders = _.mapValues(state.folders, folder => {
// Устанавливаем флаг "выбрана" для выбранной папки
if (folder.id === action.targetId) {
return { ...folder, isSelected: true };
}
// Для дочерних папок устанавливаем флаг видимости
if (folder.parentId === action.targetId) {
return { ...folder, visible: true };
}
return folder;
});
return {
...state,
folders: { ...nextFolders },
};
// ...
}
}
match({ routes, location }, (error, redirectLocation, renderProps) => {
if (redirectLocation)
res.redirect(301, redirectLocation.pathname + redirectLocation.search)
else if (error)
res.send(500, error.message)
else if (renderProps == null)
res.send(404, 'Not found')
else {
const promises = _.map(
_.filter(renderProps.components, component => component.fetchComponentData),
component => component.fetchComponentData(/*тут можно передать данные роута*/)
);
Promises.all(promises).then(() => res.send(renderToString(<RoutingContext {...renderProps}/>)));
}
})
function todos(state = [], action) {
switch (action.type) {
/*этот редьюсер написал я*/
case ADD_USER_ACTION:
return [ ...state, action.user ];
default:
return state;
}
}
@connect( state => ({ pictures: state.myPicturesReducerName }) )
export default class Card extends Component {
// ...
// yourPicturesReducer state -> this.props.pictures
// ...
}
class ControllerComponent extends Component {
super() {
super(props);
this.state = { itemId: this.getParams().id };
}
//...
render() {
return (
<div>
<p>Blah blah blah</p>
<SomeComponent itemId={this.state.itemId}/>
</div>
);
}
}
class ControllerComponent extends Component {
super() {
super(props);
this.state = { itemId: this.getParams().id };
}
componentWillReceiveProps(nextProps) {
this.setState({ itemId: this.getParams().id });
}
//...
render() {
return (
<div>
<p>Blah blah blah</p>
<SomeComponent itemId={this.state.itemId}/>
</div>
);
}
}
Calling this.setState() within this function will not trigger an additional render.