Question

我正在做我的第一个反应。我是JS，HTML，CSS甚至网络应用程序编程的新手。

我想做的是在单击按钮时显示一些信息。

我有一个API，看起来像这样：

endpoint: https://localhost:44344/api/Projects

My Data from it:
[{"id":1,"name":"Mini Jira","description":"Description for first project in list","tasks":null},{"id":2,"name":"Farm","description":"Description for second one","tasks":null}]

很好，我可以在我的React应用中通过axios轻松获得它。

现在，我将向您展示我的Project.js组件：

import React, { Component } from "react";
import { ListGroupItem, Button, ButtonToolbar } from "react-bootstrap";
import ProjectDetails from "./ProjectDetails";

class Project extends Component {
  render() {
    return (
      <ButtonToolbar>
        <ListGroupItem>{this.props.project.name}</ListGroupItem>
        <Button onClick={Here i want to display new component with details }bsStyle="primary">Details</Button>
      </ButtonToolbar>
    );
  }
}

export default Project;

我所有来自api的数据都是project类型。

我的问题是，如何在单击按钮时显示名为ProjectDetails.js的组件？我想在单独的视图（新页面或类似的东西）中显示来自我的api的project中存储的所有数据。

视图如下：

感谢您的任何建议！

编辑：

基于@Axnyff的答案，我编辑了Project.js。可以。但是，当我想要（用于测试）显示project.name时，会出现错误map of undefined。我的ProjectDetails.js：

import React, { Component } from "react";

class ProjectDetails extends Component {
  state = {};
  render() {
    return <li>{this.props.project.name}</li>;
  }
}

export default ProjectDetails;

EDIT2：

在Project.js中@Axnyff回答中，我刚刚编辑了该行：

{this.state.showDetails && (
      <ProjectDetails project={this.props.project} />
    )}

我通过道具通过了项目，现在它也像我想要的那样工作。单击后，它显示我单击的project.name。

Answer 1

您应该在React组件中使用state。让我们在您的状态下创建一个名为showDetails的字段。

您可以使用以下方法在构造函数中对其进行初始化

constructor(props) {
    super(props); // needed in javascript constructors
    this.state = {
        showDetails: false,
    };
}

然后，您需要修改onClick以将该状态设置为true

    <Button onClick={() => this.setState({ showDetails : true })} bsStyle="primary">Details</Button>

然后使用该状态显示或不显示ProjectDetails：

{ showDetails && <ProjectDetails /> }

完整的组件应该看起来像

import React, { Component } from "react";
import { ListGroupItem, Button, ButtonToolbar } from "react-bootstrap";
import ProjectDetails from "./ProjectDetails";

class Project extends Component {
  constructor(props) {
      super(props); // needed in javascript constructors
      this.state = {
          showDetails: false,
      };
  }
  render() {
    return (
      <ButtonToolbar>
        <ListGroupItem>{this.props.project.name}</ListGroupItem>
        <Button onClick={() => this.setState({ showDetails : true })} bsStyle="primary">Details</Button>
        { this.state.showDetails && <ProjectDetails /> }
      </ButtonToolbar>
    );
  }
}

export default Project;

然后您可以修改逻辑以添加切换效果等。

如果尚未完成操作，则可能应该遵循official tutorial

Answer 2

function Bar() {
  return <h1>I will be shown on click!</h1>;
}

class Foo extends React.Component {
  constructor() {
    super();
    this.state = { showComponent: false };
  }

  handleClick = () => {
    this.setState({ showComponent: !this.state.showComponent });
  };

  render() {
    return (
      <div>
        {this.state.showComponent && <Bar />}
        <button onClick={this.handleClick}>click</button>
      </div>
    );
  }
}

ReactDOM.render(<Foo />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

单击按钮显示新组件

2 个答案: