有条件地显示映射道具

Question

目前，我将在一个组件中列出所有任务。我想制作多个列表，并且只显示task.owner===listOwner(它是从父组件传下来的(所在的任务。我应该在地图功能之外执行此操作吗？我是个新手，所以请让我知道我是否可以更好地或在更好的地方问这个问题：(

render() {
const { tasks } = this.props.task;
const { listOwner }  = this.props;
return(
<Container style={{marginBottom: 50}}>
<div>List owner: {listOwner}</div>
<ListGroup>
<TransitionGroup className="task-list">
{tasks.map(({ _id, name, tokenValue, owner }) => (
<CSSTransition key={_id} timeout={500} classNames="fade">
<ListGroupItem>
<Button
className="remove-btn"
color="danger"
size="sm"
onClick={this.onDeleteClick.bind(this, _id)}
>
&times;
</Button>
<div className="inline"><div className="field-label">Task:</div> {name}</div>
<div className="inline"><div className="field-label">Value (BRPT):</div> {tokenValue}</div>
<div className="inline"><div className="field-label">Owner:</div> {owner}</div>
<div className="float-right inline"><MemberDropdown taskId={_id} /></div>
</ListGroupItem>
</CSSTransition>
))}
</TransitionGroup>
</ListGroup>
</Container>
)
}

Answer 1

这里有两种方法：

1.(filter()用于render中map之前的项目。

或

2.(在CCD_ 4中具有条件语句。

这取决于你的应用程序结构，很难从你发布的内容中分辨出来。

如果你在父组件中有所有的数据，那么过滤是有意义的，例如

const completedTasks = tasks.filter(t => t.completed)
const remainingTasks = tasks.filter(t => !t.completed)

然后将这些数组传递给您的组件，例如：

<TaskList items={completedTasks} />
<TaskList items={remainingTasks />

这里有一个例子：

import React from "react";
import ReactDOM from "react-dom";
const tasks = [
{ title: "walk the dog", completed: false },
{ title: "get some milk", completed: true }
];
const TaskItem = ({ item }) => {
return <li>{item.title}</li>;
};
const TaskList = ({ tasks }) => {
return (
<ul>
{tasks.map(t => (
<TaskItem item={t} />
))}
</ul>
);
};
function App() {
const completedTasks = tasks.filter(t => t.completed);
const remainingTasks = tasks.filter(t => !t.completed);
return (
<div className="App">
Completed
<TaskList tasks={completedTasks} />
Remaining
<TaskList tasks={remainingTasks} />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

此处为CodeSandbox链接。