doctype html
html
head
meta(name='viewport', content='width=device-width, initial-scale=1, shrink-to-fit=no')
meta(http-equiv='x-ua-compatible', content='ie=edge')
link(rel='stylesheet' type='text/css' href='/css/index.css')
body
block contentimport React from 'react';
import { Helmet } from 'react-helmet';
class Application extends React.Component{
constructor(prop){
super(prop);
}
render(){
return(
<div className='application'>
<Helmet>
<meta charSet='utf-8' />
<title>{this.props.title}</title>
</Helmet>
</div>
);
}
}
module.exports = Application;import React from 'react';
import Application from './aplication';
<Application title='Главная страница'/>render() {
return (
<div>
<BlogPost id={123} /> //Сюда он передал id
</div>
);
}
// BlogPost.js
componentWillMount() {
axios.get(`http://exmaple.com/blog/${this.props.id}`) // А тут он вывел
.then(response => this.setState(response.data))
}class Form extends React.Component{
constructor(props){
super(props);
this.state = {
currentQuestion: 0
}
}
componentWillMount = () => {
console.log(this.props.id);
axios.get('/api/test/{this.props.id}')
.then((response) => console.log(response));
};
onClick = (e) => {
if(this.state.currentQuestion != 2){
e.preventDefault();
}
this.setState({
currentQuestion: ++this.state.currentQuestion
})
}
render(){
const { thema } = this.props;
const question = thema[0].test[this.state.currentQuestion];
return(
<div>{this.componentWillMount}</div>
)
}
}import axios from 'axios';
console.log(this.props.id);
axios.get('/api/test/1')
.then((response) => console.log(response));Uncaught TypeError: Cannot read property 'props' of undefined
const Router = require('koa-router'),
User = require('./model/user'),
Test = require('./model/test'),
router = new Router();
router.get('/testing/:id', async ctx => {
await ctx.render('test', {
title: 'Текст',
path: 'test'
})
})
router.get('/api/test/:id', async(ctx) => {
let theme = await Test.theme(ctx.params.id);
let test = await Test.test(ctx.params.id);
let answearArr = await Promise.all(test.map(item => {
return Test.answear(item.id);
}));
for(let n=0; n<answearArr.length; n++){
test[n].answer = answearArr[n];
}
theme.test = rand_array(0,2,test);
ctx.body = theme;
})include layout
.container
script(src='/client/testing.js'import axios from 'axios';
axios.get('/api/test/1')
.then((response) => console.log(response));<div class='container'>
<div id='root'></div>
</div>
<script src='/client/testing.js'></script>router.get('/testing/:id', async ctx => {
await ctx.render('test', {
title: 'Тест',
})
})import axios from 'axios';
axios.get('/api/test/:id')
.then((response) => console.log(response));router.get('/api/test/:id', async(ctx) => {
let theme = await Test.theme(ctx.params.id);
let test = await Test.test(ctx.params.id);
let answearArr = await Promise.all(test.map(item => {
return Test.answear(item.id);
}));
for(let n=0; n<answearArr.length; n++){
test[n].answer = answearArr[n];
}
theme.test = rand_array(0,2,test);
ctx.body = theme;
}).get('/testing/:id', async ctx => {
let theme = await Test.theme(ctx.params.id);
let test = await Test.test(ctx.params.id);
let answearArr = await Promise.all(test.map(item => {
return Test.answear(item.id);
}));
for(let n=0; n<answearArr.length; n++){
test[n].answer = answearArr[n];
}
await ctx.render('test', {
title: 'Тест',
path: 'test',
thema: theme[0],
test: rand_array(0, 2, test),
})
})mixin question(number)
.question(id=number)
p=test[number].name
ul
each answear in test[number].answer
li
input(type='radio' name=answear.id_question)
| #{answear.text}
button.buttonTest Ответить
include layout
.container
h1=thema.name
form
+question(0)
+question(1)
+question(2)в 12 разных блоков. Показывать следующий блок после ответа на вопрос
[ RowDataPacket {
id: 1,
name: 'Вопрос 1',
id_theme: 1,
answear: [ [{id: 7, text: 'Текст 1', answer: 1}], [{id: 8, text: 'Текст 2', answer: 0}], [{id: 9, text: 'Текст 3', answer: 0}] ] },
RowDataPacket {
id: 2,
name: 'Вопрос 2',
id_theme: 1,
answear: [ [{id: 7, text: 'Текст 1', answer: 1}], [{id: 8, text: 'Текст 2', answer: 0}], [{id: 9, text: 'Текст 3', answer: 0}] ] },
RowDataPacket {
id: 4,
name: 'Вопрос 3,
id_theme: 1,
answear: [ [{id: 7, text: 'Текст 1', answer: 1}], [{id: 8, text: 'Текст 2', answer: 0}], [{id: 9, text: 'Текст 3', answer: 0}] ] } ]