如何在Reactjs中制作可点击的文本？

问题描述

我在弄清楚如何制作文本以便单击文本并将其重定向到我的Dashboard.js和About.js时遇到麻烦。有人可以帮我吗？我尝试使用路由器，但无法弄清楚如何使其工作。谢谢

function App() {
  return (
    /** 
    <Router>
      <div className="App">
        <Nav/>
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about" component={About}/>
          <Route path="/dashboard" component={Dashboard}/>
        </Switch>
      </div>
    </Router>
    */
    <div classname="App">
      <Container fluid>
        <Row style={{
            paddingTop: '250px',}}>
          <Col sm={3} style={{
              marginLeft: 'auto',marginRight: 'auto',marginRight: '0px'
            }}>
            <div class="container--wrap" style={{
                height: '60vh',borderRadius: '15px'
              }}>
              <p style={{
                  textAlign: 'center',color: 'white',paddingTop: '600px',fontSize: '50px',fontWeight: 'bolder'
                }}>
                  ABOUT
              </p>
            </div>
          </Col>
          <Col sm={3} style={{
              marginLeft: 'auto',marginLeft: '0px',marginRight: '0px',}}>
            <div class="container--wrap" style={{
                height: '60vh',fontWeight: 'bolder'
                }}>
                SIGN UP
              </p> 
            </div>
          </Col>
          <Col sm={3} style={{
              marginLeft: 'auto',marginLeft: '0px'
            }}>
            <div class="container--wrap" style={{
                height: '60vh',borderRadius: '15px'
                }}>
              <p style={{
                  textAlign: 'center',fontWeight: 'bolder'
                }}>
                DASHBOARD  
              </p> 
            </div>
          </Col>
        </Row>
      </Container>
    </div>
  );
}

我试图使文本“ ABOUT”，“ SIGN UP”和“ DASHBOARD”可单击，并将页面更改为正确的js文件。

解决方法

您可以使用按钮将文字换行，

const message = () => {
console.log("Hello World!") 
}
return (
<button onClick={message}> Press me to print a message! </button>
);

如果要使文本类似于锚链接。您可以尝试使用React Link标签。

eip

或其他组件

In [1]: from argparse import ArgumentParser

In [2]: parser = ArgumentParser()

In [3]: parser.add_argument('-a',nargs='+')
Out[3]: _StoreAction(option_strings=['-a'],dest='a',nargs='+',const=None,default=None,type=None,choices=None,help=None,metavar=None)

In [4]: parser.parse_args(['-a','foo','bar'])
Out[4]: Namespace(a=['foo','bar'])

这里是文档的链接。 https://knowbody.github.io/react-router-docs/api/Link.html

您的<div classname="App">应该在<Router>的内部，然后您可以将Link添加到元素中，例如在about情况下：

<p style={{
              textAlign: 'center',color: 'white',paddingTop: '600px',fontSize: '50px',fontWeight: 'bolder'
            }}>
             <Link to={About}>
            ABOUT
            </Link>
          </p>

reactjs reactjs