我正在寻找我的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 ? {和return (进行else，然后在其中包含NoActiveTrackers之类的组件之一，但是由于我有两个表，这意味着我可以需要4x if语句：如果两个跟踪器都有项目，则返回一个；如果活动的具有项目但未完成，则返回一个；如果完成的具有项目但活动的，则返回一个；如果两个跟踪器都没有项目，则返回一个
如何在地图之前直接进行条件渲染？
致谢
答案 0 :(得分：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>
答案 1 :(得分：0)
我认为您正在寻找类似的东西。 active.length &&。
如果活动数组为空，则不会在此处运行active.map。
{/* Need to perform conditional rending here with <NoActiveTrackers /> */}
{active.length && active.map(item => ( ...