Question

我创建了2个组件，一个是登录表单，另一个组件显示带有通过faker.js生成的一些随机数据的表。用户登录后，将显示带有一些数据的表组件。该组件在右上角也有2个按钮，所以我只想在setup( ... install_requires = [ ... 'python-gearman @ https://github.com/mtai/python-gearman/archive/master.zip' ... ] )时显示这些按钮，如果pip install -I .则不想显示这2个按钮。我怎样才能做到这一点？我应该创建除这两个按钮之外的单独组件吗？

Login.js：

user === ADMIN

TableComponent.js：

user === USER

App.js：

import React, {Component} from "react";
import { Button, Form, Header } from "semantic-ui-react";
import './loginForm.css';

class LoginForm extends Component {

    state = {}

    handleChange = (e, { name, value }) => this.setState({ [name]: value })

    handleSubmit = () => {
      this.setState({ urnNumber: '', password: '' })  
      this.props.history.push('/user')
    }

    render() {
        const { urnNumber, password } = this.state 

        return(
          <Form className="formStyle" onSubmit={this.handleSubmit}>
            <Header className="title" as='h1'>Account Portal Login</Header>
            <Header className="info" as='h5'>Please login with your URN number. If you have not been assigned a
            password, you can create one below and login afterwards</Header>
            <Header className="info" as='h4'>Please login below</Header>
            <Form.Field>
              <Form.Input label="URN number" value={urnNumber} placeholder="Enter URN number" onChange={this.handleChange}/>
            </Form.Field>
            <Form.Field>
              <Form.Input label="Password" value={password} placeholder="Enter password" onChange={this.handleChange}/>
            </Form.Field>
            <Button className="loginButton">Login</Button>
          </Form>
        )
    }
};

export default LoginForm;

截屏：在下面的屏幕截图中，仅当const RemittancePage = () => ( <Grid className={styles.container}> <Grid.Row> <Grid.Column width={11}> <Header as='h2' className={styles.title}>Remittance Page</Header> </Grid.Column> <Grid.Column floated='right' width={5}> <Button primary className={styles.formButton}>Remittance</Button> <Button primary className={styles.reportButton}>Generate Report + </Button> </Grid.Column> </Grid.Row> <Grid.Row> <Grid.Column width={16}> <Table celled selectable className={styles.remittanceForm}> <Table.Header> <Table.Row> <Table.HeaderCell>ID</Table.HeaderCell> <Table.HeaderCell>Name</Table.HeaderCell> <Table.HeaderCell>URN number</Table.HeaderCell> <Table.HeaderCell>Parishes</Table.HeaderCell> <Table.HeaderCell>Remittance</Table.HeaderCell> </Table.Row> </Table.Header> <Table.Body> <Table.Row> <Table.Cell>{faker.random.number()}</Table.Cell> <Table.Cell>{faker.name.findName()}</Table.Cell> <Table.Cell>{faker.random.number()}</Table.Cell> <Table.Cell>{faker.address.streetAddress()}</Table.Cell> <Table.Cell>{faker.date.weekday()}</Table.Cell> </Table.Row> // Some more rows </Table.Body> </Table> </Grid.Column> </Grid.Row> </Grid> ) export default RemittancePage;时var user1 = { "number": "123", "role": "ADMIN" }; var user2 = { "number": "456", "role": "USER" }; class App extends Component { render() { return ( <Router> <Switch> <div> <Route exact path="/" component={LoginForm}/> {/* <Route path="/user" component={RemittancePage} /> */} <Route path="/user" render={(user1) => <RemittancePage {...user1} />} /> <Route path="/remittanceform" component={RemittanceForm} /> </div> </Switch> </Router> ); } } export default App;才显示，而不显示右上角的2个按钮。我怎样才能做到这一点？ in this answer

Answer 1

您可以在RemittancePage jsx模板中使用以下结构：

user

假设您已将{{1}}传递给道具。

基本上，与纯JS中的相同。只是内联条件。

如何在客户端reactjs上使用基于角色的身份验证？

1 个答案: