ReactJS 返回部分中的条件渲染

Question

我在 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;

if this.state.active.length > 0 ? {我可以if this.state.active.length > 0 ? { if this.state.active.length > 0 ? {与整个return (和之后的else包含我的一个组件，如NoActiveTrackers但由于我有两个表，这意味着我需要一个 4x if语句：一个返回如果两个跟踪器都有项目，一个返回如果活动有项目但是完成没有，如果完成有项目但活动没有，则返回，如果两个跟踪器都没有项目，则返回。

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

问候

Answer 1

因为您有 2 个具有相同逻辑来显示组件的案例，所以您可以将此逻辑抽象为不同的组件，例如。 一个List组件，它将您的ListItem和NoItems作为道具并呈现它。

 const { render } = ReactDOM; function Active() { return <p>Definition of an active List item here</p> } function Completed() { return <p>Definition of an active Completed item here</p> } function NoActive() { return <p>No active list items to see here</p> } function NoCompleted() { return <p>No completed list items to see here</p> } function List({ array, listItem: ListItem, /*has start with capital letter */ noItems: NoItems, }) { if(array.length) { return array.map((item, index) => <ListItem key={index} />); } else { return <NoItems /> } } function App() { const activeItems = [1, 2]; const completedItems = []; return ( <main> <List array={activeItems} listItem={Active} noItems={NoActive} /> <List array={completedItems} listItem={Completed} noItems={NoCompleted} /> </main> ) } render(<App />, document.getElementById("root"))

 <div id="root" /> <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

Answer 2

我想你正在寻找这样的东西。 active.length && 。
如果活动数组为空，则不会在此处运行 active.map。

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