<Link to='projects/one'>One</Link>
<Route path="projects" component={Projects} >
<Route path="one" component={ProjectsLevel} />
<Route path="two" component={ProjectIngrad} />
</Route>
const Projects = ({ children }) => children || <div>Projects</div>
div {
height: 1px;
background-image: repeating-linear-gradient(to right,
green 0, green 1em,
purple 1em, purple 2em,
tomato 2em, tomato 3em,
blue 3em, blue 4em
);
}
button
order 3
// асинхронная функция, которое аргументом передаем callback
function asyncFunction(callback) {
setTimeout(function() {
callback('Hello, World!'); // вызываем callback и передаем ему ответ 'Hello, World'
}, 2000);
}
// Вызываем асинхронную функцию, но чтоб получить ответ, нужно передать callback
// Т.е передаем другую функцию
asyncFunction(function(response) {
alert(response); // выводим ответ.
});
class Parent extends Component {
constructor() {
super();
this.state = {
text: ''
};
}
// Ссылку на этот метод будем передавать в Button компонент.
buttonClick() {
this.setState({ text: Date.now() });
}
render() {
return (
<div>
// Ну, а тут передаем состояние text (родительского компонента) через props в дочерний (Text)
<Text text={ this.state.text } />
<Button onClick={ () => this.buttonClick() }/>
</div>
);
}
}
function Button(props) {
return <button onClick={ props.onClick }>Click me</button>
}
function Text(props) {
return <span>{ props.text }</span>
}