const SearchList = ({ lists, users }) => { return ( <table> <thead> <tr> <th>项目</th> <th>负责人</th> </tr> </thead> <tbody> { lists.map(project => <tr> <td>{project.name}</td> <td>{users.find(user => user.id === project.personId)?.name}</td> </tr> ) } </tbody> </table> ) } export default SearchList
渲染列表
const SearchPannel = ({ users, param, setParam }) => { return ( <form> <div> <input type="text" value={param.name} onChange={evt => setParam({ ...param, name: evt.target.value })} /> <select value={param.personId} onChange={evt => setParam({ ...param, personId: evt.target.value })}> <option value={''}>负责人</option> { users.map(user => <option key={user.id} value={user.id}>{user.name}</option>) } </select> </div> </form> ) } export default SearchPannel