我有一个排版问题,如果可能的话,我需要一些帮助。
我有一个父组件,它通过一个结果数组传递给一个子组件,然后我将映射显示信息。
父组件。
import { Table } from 'semantic-ui-react';
import { InvitedUser } from '../common/types/userInvitations';
import EmptyUserInvitesTable from './EmptyUserInvitesTable';
import UserInvitesTable from './UserInvitesTable';
// Type that sets up the prop types for props passed into
// the component
type UserInvitationsProps = {
data: Array<InvitedUser>;
};
// Class which contains the User Signup form and keeps the values in state, ready to be sent to the API.
class UserInvitations extends Component<
UserInvitationsProps
> {
render(): JSX.Element {
const { data } = this.props;
let showData = false;
if (data) {
showData = true;
}
return (
<div className="row settings-column">
<div className="userInvitesWidth">
<div className="row form-title align-column">
<Table striped>
<Table.Header>
<Table.Row>
<Table.HeaderCell />
<Table.HeaderCell>Invitee</Table.HeaderCell>
<Table.HeaderCell>Email Address</Table.HeaderCell>
<Table.HeaderCell>Invited By</Table.HeaderCell>
<Table.HeaderCell>Email Address</Table.HeaderCell>
<Table.HeaderCell>Date Invited</Table.HeaderCell>
<Table.HeaderCell>Date Joined</Table.HeaderCell>
<Table.HeaderCell>Actions</Table.HeaderCell>
</Table.Row>
</Table.Header>
{showData
? (
<EmptyUserInvitesTable />
)
: (
<UserInvitesTable data={data}/>
)}
</Table>
</div>
</div>
</div>
);
}
}
export default UserInvitations;
子组件:
import { Table, Image, Button } from 'semantic-ui-react';
import { InvitedUser } from '../common/types/userInvitations';
import styled from 'styled-components';
const SendEmailButton = styled(Button)`
width: 72px;
height: 36px;
border-radius: 18px;
border: solid 1px #4c4cdc;
background-color: #ffffff;
color: #4a4a4a;
font-family: "Roboto", sans-serif !important;
font-size: 14px !important;
`;
// Type that sets up the prop types for props passed into
// the component
type UserInvitationTableProps = {
data: Array<InvitedUser>;
};
class UserInvitationsTable extends Component<
UserInvitationTableProps
> {
render(): JSX.Element {
const { data } = this.props;
return (
{data.map((dataset: any) => (
<Table.Body>
<Table.Row key={dataset.id}>
<Table.Cell>
<Image src={dataset.invitedBy.avatar} rounded size="mini" />
</Table.Cell>
{dataset.firstName && dataset.lastName
? (
<Table.Cell>
{dataset.firstName}
{dataset.lastName}
</Table.Cell>
)
: (
<Table.Cell>N/A</Table.Cell>
)}
<Table.Cell>{dataset.username}</Table.Cell>
<Table.Cell>{dataset.invitedBy.name}</Table.Cell>
<Table.Cell>{dataset.invitedBy.username}</Table.Cell>
<Table.Cell>{dataset.createdOn}</Table.Cell>
{dataset.invitedState === 'ARCHIVED'
? (
<Table.Cell>{dataset.updatedOn}</Table.Cell>
)
: (
<Table.Cell>N/A</Table.Cell>
)}
{dataset.invitedState === 'PENDING_USER_ACCEPTATION'
? (
<Table.Cell>
<SendEmailButton
className="sumBtn"
// onClick={(e) => this.onStart(e, range)} need to work out what the button does from igor
// disabled={disabled}
// loading={startLoading} TBC
>
Start
</SendEmailButton>
</Table.Cell>
)
: (
<Table.Cell>No Actions</Table.Cell>
)}
</Table.Row>
</Table.Body>
))}
)}
}
export default UserInvitationsTable;
我得到的错误是
类型'{ data: InvitedUser[]; "": any; }"不可分配给类型 "Element"。
但不知道为什么。希望得到任何帮助。
谢谢你的帮助
最高组件。
import { Query, QueryResult } from 'react-apollo';
import UserInvitations from '../components/userInvitations/UserInvitations';
import { InvitedUser } from '../components/common/types/userInvitations';
import { INVITED_USERS } from '../components/common/Queries';
/**
* the container for the user invitations
* renders the expense page wrapped by a query.
*/
const CUserInvitations: React.FC<{}> = (): JSX.Element => (
<Query query={INVITED_USERS}>
{({ loading, data }: QueryResult<Array<InvitedUser>>): ReactNode => {
if (loading) {
return null;
}
if (!data) return null;
return <UserInvitations data={data} />;
}}
</Query>
);
export default CUserInvitations;
导出的数据类型。
firstName: string;
lastName: string;
createdOn: string;
username: string;
updatedOn: string;
id: string;
invitedState: string;
invitedBy: {
name: string;
avatar: string;
id: string;
username: string;
}
};```
从最高组件移除 : ReactNode
const CUserInvitations: React.FC<{}> = (): JSX.Element => (
<Query query={INVITED_USERS}>
{({ loading, data }: QueryResult<Array<InvitedUser>>): ReactNode => {
if (loading) {
return null;
}
if (!data) return null;
return <UserInvitations data={data} />;
}}
</Query>
);