Admin-on-Rest Как создать собственный компонент Show для добавления фильтра

Я хотел бы создать собственный компонент Show, который может использовать компонент Filter, который использует компонент List. Честно говоря, я не знаю, с чего начать. Может ли кто-нибудь указать мне в правильном направлении?

Вот как это используется в List:

export const LogList = (props) => (
    <List {...props} perPage={100} title="Logs and Reports" filters={< FileFilter/>}>

Я хотел бы иметь возможность использовать его в Show вот так:

export const archivedShow = ({ ...props }) => (
        <Show title="Log" {...props} filters={<LogFilter/>} >

person Stebermon    schedule 20.07.2017    source источник


Ответы (1)


Вы можете написать собственный подключенный компонент. Тогда вы можете делать, как хотите.

Вы можете предоставить действия для компонента show так же, как и для любой другой композиции. https://marmelab.com/admin-on-rest/Show.html#actions

Вы можете использовать это действие для заполнения поля в вашем состоянии (возможно, с помощью специального редуктора).

Затем ваш компонент может быть подключен к состоянию редукции.

что-то вроде ниже

class connectedReferenceInput extends Component {
  render() {
    <ReferenceInput source={this.props.source} >
      <somecomp>
    </ReferenceInput>
  }
}

function mapStateToProps(state, props) {
  return {
    source: state.admin.somefield.source
  };
}

export default connect(mapStateToProps, {
  crudGetList: crudGetListAction
})(ClientInput)

В документах AOR также есть документы для написания редюсера.

ПОДРОБНЕЕ: 1) somecomp — это любой компонент, который вам нужен как дочерний элемент referenceInput 2) somefield — это любое поле, которое вы настроили для передачи данных между подключенным компонентом фильтра и linkedReferenceInput.

Распад того, что вы делаете по существу.

1) создайте подключенный компонент, который вы сделаете дочерним элементом фильтра. Этот подключенный компонент запускает избыточное «Действие», которое изменяет часть вашего состояния с помощью «редуктора».

Документы как для написания действия, так и для редюсера доступны в документах aor.

2) создайте подключенныйReferenceInput (как указано выше), который получает (через mapStateToProps) изменения состояния, которые делает ваш connectFilterComp. Используя это, вы можете создать переменный фильтр для referenceInput и отобразить свои переменные данные.

В основном вы используете избыточность для передачи данных между фильтром и вашим компонентом.

person kunal pareek    schedule 21.07.2017
comment
Извините, я новичок в редуксе, для <somecomp> это будет фильтр в этом случае? Также для источника: state.admin.somefield.source что такое somefield? Я немного запутался, что это должно быть. @кунал парик - person Stebermon; 21.07.2017
comment
Somefield — это просто произвольное поле, которое вы настраиваете с помощью редьюсера и действия в вашем состоянии. somecomp будет любым дочерним элементом referenceInput, который вы выбираете/нужно AOR использует избыточность для управления состоянием, поэтому вам было бы полезно изучить его. Вкратце все так: Redux — это хранилище состояния, вы можете хранить всю информацию о состоянии там вместо того, чтобы передавать состояние в качестве реквизита через разные компоненты. mapStateToProps берет небольшой кусочек состояния и, по сути, превращает его в свойства, которые получает ваш подключенный компонент. - person kunal pareek; 22.07.2017
comment
Редактирование ответа выше для большей ясности - person kunal pareek; 22.07.2017