Я сделал voapp с помощью response.js, использовал styled-компоненты, но в index.html рендеринг всех - PullRequest
Новая
       20

Я сделал voapp с помощью response.js, использовал styled-компоненты, но в index.html рендеринг всех

0 голосов
/ 26 августа 2018

Произошла ошибка при проектировании с запланированными компонентами. Ошибка вызвана перекрытием компонентов.Я настроил URL, используя маршрут.Первым компонентом, который выходит, является компонент приложения, но выходит компонент VoteComponent.В чем проблема?Я не думаю, что именно поэтому это связано с URL. это мой github

компоненты / App.js 

injectGlobal`
    html, body{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }
  #root{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }
`    
render(){
    return(
        <Container1>
            <Poll>
                    <Header>
                        <Logo>
                            투표
                        </Logo>
                    </Header>
                    <form onSubmit={this.handleSubmit} style={formStyle}>
                        <div style={{ width: '60%', height:'50%', marginLeft: 'auto', marginRight: 'auto'}}>
                        <input type={'text'} placeholder={'질문을 입력하세요'} style={inputStyle} name={'ques'}
                               onChange={this.handleChange} />
                        <input type={'text'} placeholder={'선택할항목을 입력하세요'} style={inputStyle} name={'ans1'}
                               onChange={this.handleChange}/>
                        <input type={'text'} placeholder={'선택할항목을 입력하세요'} style={inputStyle} name={'ans2'}
                               onChange={this.handleChange}/>
                        <input type={'text'} placeholder={'접근할 url 5자리숫자로 정해주세요'} style={inputStyle} name={'url'} onChange={this.handleChange} maxLength={'5'}/>
                        </div>
                        <div style={{ width: '60%', height:'30%', marginLeft: 'auto', marginRight: 'auto'}}>
                            <input type={'submit'} value={'질문페이지 만들기'}/>
                            <br/>
                        <Link to={`/${this.state.url}`}>
                            페이지가기
                        </Link>
                        </div>
                    </form>
            </Poll>
        </Container1>
    )
}
const Container1 = styled.div`
  width: 100%;
  height: 100%;
  background-color:#ffffff;
`    

const Header = styled.div`
  width: 50%;
  height: 20%
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-size: 250%

`

const Logo = styled.div`
    width:100%;
    height: 100%;
   `


const Poll = styled.div`
    width: 50%;
    height: 50%;
    background-color: skyblue;
    left: 50%;
    top: 50%;
    position: absolute;
    transform: translate(-50%,-50%);
`

let formStyle = {
    width:'100%',
    height:'100%'
}
let inputStyle ={
    width:'100%',
    height:'20%',

}

компоненты / Vote.js 

render() {
    let ques = this.state.ques;
    let ans1 = this.state.ans1;
    let ans2 = this.state.ans2;
    let asd = document.URL;
    let zxc = asd.substring(28);
    return (
        <Container2>
            <Poll2>
                <div style={{width: '100%', height:'80%'}}>
                <div style={{marginBottom: '4%', textAlign: 'center', fontSize:'250%'}}>{ques}</div>

                <div style={{marginBottom: '3%', textAlign: 'center', fontSize:'150%'}}>
                    <input type={'radio'} value={ans1} name={'option'} />
                    <span>{ans1}</span>
                    &nbsp;&nbsp;&nbsp;
                    <input type={'radio'} value={ans2} name={'option'}/>
                    <span>{ans2}</span>
                </div>

                <div style={{textAlign: 'center', fontSize:'150%', width:'100%', height:'30%'}}>
                    <input type={'submit'} value={'투표하기'} onClick={this.handleClick} style={{width:'30%', height:'50%'}}/>
                    <Link to={`/${zxc}/result`}><input type={'button'} value={'결과창가기'} style={{width:'30%', height:'100%'}}/></Link>
                </div>

                </div>

                <div style={{width: '100%', height:'20%'}}>
                    <button onClick={this.refresh} style={{width:'100%', height:'100%', fontSize:'100%', border:'none', backgroundColor:'#f1f2f4'}}>새로고침</button>
                </div>
            </Poll2>
        </Container2>
    )
}
const Container2 = styled.div`
    width:100%;
    height:100%;
`

const Poll2 = styled.div`
    width: 50%;
    height: 50%;
    background-color: skyblue;
    left: 50%;
    top: 50%;
    position: absolute;
    transform: translate(-50%,-50%);
`

настройка / Root.js 

render(){
    let asd = document.URL;
    let zxc = asd.substring(28, 33);
    return(
        <Fragment>
            <Router>
                <Fragment>
                    <Route path={'/'} exact={true} component={App}/>
                    <Route path={`/${zxc}`}  component={Vote}/>
                    <Route path={`/${zxc}/result`} component={Result}/>
                </Fragment>
            </Router>
        </Fragment>
    )
}

1 Ответ

0 голосов
/ 26 августа 2018

Вы полагаетесь на то, что URL-адрес довольно длинный, и этого, скорее всего, не произойдет. Переменной zxc, вероятно, присвоено пустое строковое значение, которое превращает ваш маршрут Vote в корневой путь, поскольку /${""} равняется только /.

...