单击按钮显示新组件

Question

我正在做我的第一个反应 ptoject。我是 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;

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

我的问题是，如何在单击按钮时显示我命名为 ProjectDetails.js 的组件？我想在单独的视图中显示存储在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：

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

{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>