Question

使用计划的组件进行设计时发生错误该错误是由重叠的组件引起的。我使用路由设置了网址。出现的第一个组件是应用程序组件，但出现了VoteComponent。有什么问题？我不认为这是由url引起的。 this is my github

components / 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%',

}

components / 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%);
`

setting / 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>
    )
}

Answer 1

您所依赖的URL很长，而且这种情况很可能不会发生。由于zxc等于Vote，/${""}变量可能被分配了一个空字符串值，使您的/路由进入根路径。

我用react.js制作了一个表决应用程序，使用了样式组件，但是在index.html中呈现了所有

1 个答案: