我有一個主要組件,我擁有所有狀態。 在這裏,我將這個狀態傳遞給了兩個不同的組件。 問題是 - 我需要在兩個不同的鏈接中打開這兩個組件(<TimeTracker />
,<TimeCalendar />
)。使用道具在ReactJS中路由
單獨呈現它們。
我該如何使用React-router?可能嗎?
貝婁是我的主要成分
export default class App extends React.Component {
constructor() {
super();
this.initStorage();
this.state = {
startTime: this.getStoreItem('startTime') || 0,
currentTask: this.getStoreItem('currentTask') || '',
results: this.getStoreItem('results') || [],
calendarResults: this.getStoreItem('calendarResults') || []
};
}
/**
create an object in localStorage for timer data if it is not present
*/
initStorage() {
let data = localStorage.getItem('timeData');
if (!data) {
localStorage.setItem('timeData', JSON.stringify({}));
}
}
/**
* get item value from storage
* @param key - item name
*/
getStoreItem = (key) => {
const data = JSON.parse(localStorage.getItem('timeData'));
return data[key];
}
/**
* change item value in storage
* * @param key - item name
* @param value - new value for item
*/
setStoreItem = (key, value) => {
const data = JSON.parse(localStorage.getItem('timeData'));
data[key] = value;
localStorage.setItem('timeData', JSON.stringify(data));
this.setState({
[key]: value
});
}
render() {
const { startTime, currentTask, results, calendarResults } = this.state;
return (
<MuiThemeProvider>
<div>
<TimeTracker
results={results}
setStoreItem={this.setStoreItem}
startTime={startTime}
currentTask={currentTask} />
<TimeCalendar calendarResults={calendarResults} />
</div>
</MuiThemeProvider>
);
}
}
我在路由是新的,並沒有發現一些類似的例子代碼。
請幫助理解如何做到這一點。 我可以爲他們做路由,但是如果組件沒有道具。 但在我的例子中我很困惑
先謝謝了!
你有沒有試過react-router的' '? –
tenor528
是的,但我不確定它應該如何在我的示例中看起來。 我可以在渲染中使用它嗎?我的主要組件應該在渲染中返回以及如何通過'' –