Javascript ReactJS返回部分中的条件呈现_Javascript_Reactjs_Conditional Statements

Javascript ReactJS返回部分中的条件呈现

javascript reactjs

Javascript ReactJS返回部分中的条件呈现,javascript,reactjs,conditional-statements,Javascript,Reactjs,Conditional Statements,我想在返回我的ReactJS页面的内部寻找一些关于条件呈现的帮助下面是我的代码的样子： import React from "react"; import NoActiveTracker from "../components/NoActiveTracker.js"; import NoCompletedTracker from "../components/NoCompletedTracker.js"; var bg = { background: "#6F42C1" } cla

我想在返回我的ReactJS页面的内部寻找一些关于条件呈现的帮助

下面是我的代码的样子：

import React from "react";

import NoActiveTracker from "../components/NoActiveTracker.js";
import NoCompletedTracker from "../components/NoCompletedTracker.js";


var bg = {
  background: "#6F42C1"
}

class TrackerGeneralPage extends React.Component {
    state = {
        id: '',
        active: [],
        completed: [],
        completedDateNow: '',
        newStatus: 'Complete'
      };      

  render() {
    const { active, completed } = this.state

    // if this.state.active.length > 0 ? { ---- I can do this with the return and set an else that will work fine but I am trying to do it for each table
    return (
        <>
        <div>

          {/* Active Trackers */}
          <div id="toggle-active" className="">
            <div className="my-4">
              <table className="table table-hover table-bordered mb-3">
                <thead className="thead-dark">
                  <tr>
                    <th scope="col" className="h5">Active</th>
                    <th scope="col">Name</th>
                    <th scope="col">Regulation</th>
                    <th scope="col">Due On</th>
                    <th scope="col">Assigned</th>
                    <th scope="col">Status</th>
                  </tr>
                </thead>
                <tbody>
                {/* Need to perform conditional rending here with <NoActiveTrackers /> */}
                {active.map(item => (
                    <>
                    <tr key={item.id}>
                      <th scope="row" className="dropdown">
                        <a className="btn btn-dark" data-toggle="collapse" href={"#a" + item.id} role="button" aria-expanded="false" aria-controls="item">Expand</a>
                      </th>
                      <td>{item.name}</td>
                      <td>{item.reg}</td>
                      <td>{item.dateDue}</td>
                      <td>{item.assigned}</td>
                      <td>{item.status}</td>
                    </tr>
                      <tr>
                        <td id={"a" + item.id} className="collapse hiddenRow" colSpan="6" rowSpan="1">
                          <div class="row">
                            <div class="col-sm">
                              <div class="card text-white text-center" style={bg}>
                                <div class="card-body">
                                  <h5 class="card-title text-white font-weight-bold">Occurrence</h5>
                                  <p class="card-text">{item.occurrence}</p>
                                  <p>Next Expected Occurrence: Unknown</p>
                                  </div>
                              </div>
                            </div>
                            <div class="col-sm">
                              <div class="card bg-light text-center">
                                <div class="card-body">
                                  <h5 class="card-title font-weight-bold">Completed By</h5>
                                  <p class="card-text">{item.completer} on {item.dateCompleted}</p>
                                  <button className="btn btn-dark" onClick={() => this.handleUpdateTracker(item)} >Mark as Complete <img src="https://icon.now.sh/done_all/ffffff" width="25" height="25" className="d-inline-block align-top" alt="Complete Tracker" /></button>
                                </div>
                              </div>
                            </div>
                            <div class="col-sm">
                              <div class="card text-center">
                                <div class="card-body text-white bg-dark">
                                  <h5 class="card-title text-white font-weight-bold">Description</h5>
                                  <p class="card-text">{item.description}</p>
                                  <button className="btn btn-light ml-1" onClick={() => this.handleDeleteTracker(item.id)} >Delete Tracker<img src="https://icon.now.sh/delete_forever" width="25" height="25" className="d-inline-block align-top" alt="Delete Tracker" /></button>
                                </div>
                              </div>
                            </div>
                          </div>
                        </td>
                    </tr>
                  </>
                ))}
                 </tbody>
              </table>
            </div> {/* End Table Section */}
          </div> {/* End Active Toggle */}


          {/* Completed Trackers */}
          <div id="toggle-active" className="">
            <div className="my-4">
              <table className="table table-hover table-bordered mb-3">
                <thead className="thead-dark">
                  <tr>
                    <th scope="col" className="h5">Completed</th>
                    <th scope="col">Name</th>
                    <th scope="col">Regulation</th>
                    <th scope="col">Due On</th>
                    <th scope="col">Assigned</th>
                    <th scope="col">Status</th>
                  </tr>
                </thead>
                <tbody>
                {/* Need to perform conditional rending here with <NoCompleteTrackers /> */}
                {completed.map(item => (
                    <>
                    <tr key={item.id}>
                      <th scope="row" className="dropdown">
                        <a className="btn btn-dark" data-toggle="collapse" href={"#a" + item.id} role="button" aria-expanded="false" aria-controls="item">Expand</a>
                      </th>
                      <td>{item.name}</td>
                      <td>{item.reg}</td>
                      <td>{item.dateDue}</td>
                      <td>{item.assigned}</td>
                      <td>{item.status}</td>
                    </tr>
                      <tr>
                        <td id={"a" + item.id} className="collapse hiddenRow" colSpan="6" rowSpan="1">
                          <div class="row">
                            <div class="col-sm">
                              <div class="card text-white text-center" style={bg}>
                                <div class="card-body">
                                  <h5 class="card-title text-white font-weight-bold">Occurrence</h5>
                                  <p class="card-text">{item.occurrence}</p>
                                  </div>
                              </div>
                            </div>
                            <div class="col-sm">
                              <div class="card bg-light text-center">
                                <div class="card-body">
                                  <h5 class="card-title font-weight-bold">Completed By</h5>
                                  <p class="card-text">{item.completer} on {item.dateCompleted}</p>
                                </div>
                              </div>
                            </div>
                            <div class="col-sm">
                              <div class="card text-center">
                                <div class="card-body text-white bg-dark">
                                  <h5 class="card-title text-white font-weight-bold">Description</h5>
                                  <p class="card-text">{item.description}</p>
                                </div>
                              </div>
                            </div>
                          </div>
                        </td>
                    </tr>
                  </>
                ))}
                 </tbody>
              </table>
            </div> {/* End Table Section */}
          </div> {/* End Completed Toggle */}

        {/* Conditional Rendering Components are here just so I can visually seem them at the bottom of the page no matter way, will be removed once I figure out the conditional rendering of them */}
          <NoActiveTracker />
          <NoCompletedTracker />

        </div> {/* End Container */}
        </>
    )
  }
}

export default TrackerGeneralPage;

从“React”导入React；
从“./components/NoActiveTracker.js”导入NoActiveTracker；
从“./components/NoCompletedTracker.js”导入NoCompletedTracker；
变量bg={
背景：“6F42C1”
}
类TrackerGeneralPage扩展React.Component{
状态={
id:“”，
活动：[]，
已完成：[]，
completedDateNow:“”，
新闻状态：“完成”
};      
render（）{
const{active，completed}=this.state
//如果this.state.active.length>0？{----我可以用return来实现这一点，并设置一个else，它可以很好地工作，但我正在尝试为每个表执行它
返回(
{/*活动跟踪器*/}
活跃的
名称
规定
到期日
分配
地位
{/*需要在此处使用*/}执行条件呈现
{active.map（项=>(
{item.name}
{item.reg}
{item.dateDue}
{item.assigned}
{item.status}
发生
{item.occurrence}
下一个预期事件：未知
完成人
{item.dateCompleted}上的{item.completer}
此.handleUpdateTracker（项目）}>标记为已完成
描述
{item.description}
this.handledeletracker（item.id）}>Delete跟踪器
))}
{/*结束表部分*/}
{/*结束活动切换*/}
{/*已完成的跟踪器*/}
完整的
名称
规定
到期日
分配
地位
{/*需要在此处使用*/}执行条件呈现
{已完成。映射（项=>(
{item.name}
{item.reg}
{item.dateDue}
{item.assigned}
{item.status}
发生
{item.occurrence}
完成人
{item.dateCompleted}上的{item.completer}
描述
{item.description}
))}
{/*结束表部分*/}
{/*结束已完成切换*/}
{/*条件呈现组件就在这里，这样我就可以直观地将它们显示在页面底部，无论以何种方式，一旦我确定它们的条件呈现，它们将被删除*/}
{/*结束容器*/}
)
}
}
导出默认TrackerGeneralPage；

如果this.state.active.length>0，我可以执行

？{

和整个

返回（

和

else

之后包含我的一个组件，如

NoActiveTrackers

，但由于我有两个表，这意味着我需要一个4x

if

语句：如果两个跟踪器都有项目，则返回一个，如果活动的有项目但未完成，则返回一个，如果完成的有项目但活动的没有，则返回一个如果两个跟踪器都没有项目，则返回

如何直接在贴图之前进行条件渲染

问候

我想你是我

                {/* Need to perform conditional rending here with <NoActiveTrackers /> */}
                {active.length && active.map(item => ( ...