С помощью react-semantic-ui я создал поисковый, разбивающий на страницы компонент React Table
рабочий пример: https://codesandbox.io/s/23q6vlywy
Использование
<PaginationTable
items={[
{
id: 1,
name: "test-item-1 ???"
},
{
id: 2,
name: "test-item-2"
},
{
id: 3,
name: "test-item-3"
}
]}
columnOption={[
{
header: "idHeader",
cellValue: "id",
onItemClick: item => {
alert(item.id);
},
sortingField: "id"
},
{
header: "Name~",
cellValue: item =>
`*custom text cannot be searched* property can item.name => ${
item.name
} `,
onItemClick: item => {
alert(item.name);
},
sortingField: "name"
}
]}
initSortingField={"id"}
initSortingOrderAsc={false}
pagination
itemsPerPage={2}
searchKeyProperties={["id", "name"]}
/>
Но этот компонент в настоящее время может иметь только определенный порядок
1.SearchBar on top
2.Table on middle
3.PaginationBar on bottom
И вообще, я не написал 3 дочерних компонента в Компоненте, SearchBar, Table, PaginationBar
Так что мне сложно переписать его, чтобы сделать реквизит способом изменить порядок, как показано ниже
<PaginationTable {...props}>
{({ SearchBar, Table, PaginationBar })=>
<div>
<SearchBar />
<Table />
<SearchBar />
</PaginationTable>
</div>
</PaginationTable>
Потому что, когда я пытался перейти на рендеринг реквизита, я сначала должен написать 3 компонента независимо, что означает, что я должен изменить все переменные в this (this.state, this.props, this.xxxFunction) на что-то другое .
Например:
В, я могу использовать
<Input onChange={()=>{
this.setState({ searchBarText: e.target.value });
}}/>
Но если я поменяю его на 3 компонента, мне придется переписать что-то вроде
const SearchBar = ({onTextChange}) => <Input onChange=
{onTextChange}/>
<SearchBar onTextChange={()=>{
this.setState({
searchBarText: e.target.value
});
}} />
Можно ли как-то элегантно настроить порядок дочерних компонентов или как-то проще писать реквизит рендеринга?
Обновлено @ 2018.10.27 17:36 +08: 00
Я изменил функцию рендеринга <PaginationTable>, как показано ниже, но при вводе на <SearchInput>
она будет потеряна в фокусе курсора мыши.
render(){
const SearchBar = ()= (<Input onChange={()=>{...} />);
const TableElement = ()=>(<Table {...} > ... </Table>);
const PaginationBar = ()=>(<Menu {...} > ... </Menu>);
enter code here
return(
<React.Fragment>
{this.props.children({ SearchBar,TableElement, PaginationBar })}
</React.Fragment>)};
Затем я обнаружил, что таким образом DOM будет обновляться каждый раз, когда обновляется мое состояние, потому что каждый рендер будет создавать ссылку на новый компонент на const SearchBar = ()=>(...).
Благодаря @Ralph Najm
Если я объявлю дочерний компонент, как показано ниже, DOM не будет обновляться каждый раз.
render(){
const SearchBar = (<input onChange={...} />);
const TableElement = (<Table .../>);
const PaginationBar = (<Menu .../>);
//... same as above
}
Таким образом, я могу изменить свой компонент для рендеринга реквизита, чтобы очень легко оформить заказ.
Заранее спасибо.