Javascript 单击按钮显示新组件

我正在做我的第一件事。我是JS、HTML、CSS甚至web应用程序编程的新手

我试着做的是在点击按钮时显示一些信息

我有一个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;

EDIT2:

在@Axnyff answet的

Project.js

中，我刚刚编辑了这一行：

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

{this.state.showDetails&&(
)}

---

我通过了道具的项目，现在它的工作方式就像我想要的一样。单击后，显示我单击的

project.name

您应该在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>

this.setState（{showDetails:true}）bsStyle=“primary”>详细信息

然后使用该状态显示或不显示项目详细信息：

{ showDetails && <ProjectDetails /> }

{showDetails&&}

完整的组件应该如下所示

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;

import React，{Component}来自“React”；
从“react bootstrap”导入{ListGroupItem，Button，ButtonToolbar}；
从“/ProjectDetails”导入项目详细信息；
类项目扩展组件{
建造师（道具）{
super（props）；//javascript构造函数中需要
此.state={
showDetails:false，
};
}
render（）{
返回(
{this.props.project.name}
this.setState（{showDetails:true}）bsStyle=“primary”>详细信息
{this.state.showDetails&&}
);
}
}
导出默认项目；

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

如果您还没有这样做，您可能应该按照

功能条（）{
返回我将显示在点击！；
}
类Foo扩展了React.Component{
构造函数（）{
超级（）；
this.state={showComponent:false}；
}
handleClick=（）=>{
this.setState（{showComponent:！this.state.showComponent}）；
};
render（）{
返回(
{this.state.showComponent&&}
点击
);
}
}
render（，document.getElementById（“根”））

看起来很漂亮，很简单，我会在几秒钟内检查它！但是告诉我，
ProjectDetails
现在如何显示我单击的项目的详细信息？例如，在我的帖子中，当我在
Mini Jira
中单击详细信息时，组件
ProjectDetails
如何知道我想从我的api中显示该记录中的详细信息？如果您的ProjectDetails组件与一个项目相关，您可能需要向它传递一个道具，如
，我将有很多项目，我想根据我单击的按钮显示（例如）说明。那么如何将
project
传递到
ProjectDetails.js
呢？这是我想做的主要事情，因为你的解决方案非常有效！（我可以在点击按钮时显示一些内容，您的答案有效）但我问题的第二部分是如何根据我的
项目显示详细信息？如您所见，目前我有两个项目，
Farm
和
MiniJira
您不能将this.props.project.name传递给您的ProjectDetails对象吗？当我添加
ProjectDetails.js
返回行时（仅用于测试）：
返回
{this.props.project.name}
我得到一个错误，
项目名称
未定义：/
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;