0

この構造をページに実装したいと思います:
1. 要約付きのカード (収益、ユーザーなど)
2. Google マップからの地図
3. リスト要素

リスト要素内にはフィルタリングがあります。リストをフィルタリングしてマップとカードでフィルタリングされた情報を表すときに、フィルター オプションを使用する方法に行き詰まっています。

@trixnが推奨するように、私はこの構造を使用しています:

// app.js

<Admin restClient={jsonServerRestClient('http://jsonplaceholder.typicode.com')}>
    <Resource name="posts" list={MyCustomPostList} /* other views */ />
</Admin>


// MyCustomPostList.js
class MyCustomPostList extends React.Component {
render() {
    const {myOwnProp, ...otherProps} = this.props;

    return (
        <div>
            // render your own components here
            <AnyComponent myOwnProp={myOwnProp} />
            <AGoogleMapsComponent />

            // render the normal <List> component
            <List {...otherProps}>
                <Datagrid>
                    <TextField source="id" />
                    <TextField source="title" />
                    <TextField source="body" />
                </Datagrid>
             </List>
        </div>
    );
}
}

現在、必要なデータをマップと AnyComponent に送信できません。そのため、Maps と AnyComponent に同じデータを渡すか、List コンポーネントで使用されているフィルターを同期する必要があります。

どうすればこれを達成できますか?

4

2 に答える 2

3

ありがとうございました！新しいアクションを接続する方法を知っているでしょう。しかし、すでに使用されているアクションに接続して Filter オプションを Maps と AnyComponent に渡す方法がわからないので、List コンポーネントで Filter がトリガーされた後に状態を更新する必要がある関連情報をそこに表示できます。

あなたは行動につながりません。それらをディスパッチして、redux ストアの状態を変更します。Redux の概念を完全に理解することが重要です。そうしないと、この種のカスタム アプリを構築するのが非常に難しくなります。データが上から下にのみ流れていることを確認するために、コンポーネントはストアの変更のみをリッスンでき、アクションはリッスンできません。

したがって、基本的には次の 2 つのオプションがあります。

1. 独自の<List>コンポーネントを作成する

admin-on-restドキュメントから引用：

Admin-on-rest は、カスタマイズを念頭に置いて構築されました。たとえば、カスタム リスト レイアウトや特定のリソースの別のエディション フォームを表示するために、任意の admin-on-rest コンポーネントを独自のコンポーネントに置き換えることができます。

リスト ビューに追加要素を表示するだけの場合は、<List>コンポーネントの代わりにコンポーネントをラップでき<Resource>ます。<List>コンポーネントは、prop "data" でエンティティを受け取り、prop "ids" でフィルタリングされた ID を受け取ります。それを使用して、独自のコンポーネントに表示できます。たとえば、場所のリストを管理し、リスト コンポーネント内に Google マップを表示する場合:

import React from 'react';
import { List } from 'admin-on-rest';


const LocationsList = props => (
    // render your own components
    <MyGoogleMapsComponent  data={this.props.data} ids={this.props.ids}>

    // render the admin-on-rest <List> component
    <List {...props}>
        // render the DataGrid
    </List>
);

<Resource>次に、カスタム リストをコンポーネントに渡すことができます。

<Admin>
    <Resource name="locations" list={LocationList} />
</Admin>

リスト内の場所をフィルタリングすると、更新されたクエリがに渡され<LocationList>、新しい場所で再レンダリングされます。ただし、これは管理ページのリスト ビュー内にのみ Google マップを表示することに注意してください。

2. コンポーネントを redux ストアに接続します。

これは、Google マップなどのコンポーネントをリスト ビューの外に表示する場合にのみ行ってください。の内部についてさらに多くのことを学ぶ必要があるため、これははるかに高度ですadmin-on-rest。カスタム コンポーネントを redux ストアに接続する必要があります。パッケージのconnect()関数でそれを行うことができます：react-redux

// in MyGoogleMapsComponent.js
import React from 'react';
import { connect } from 'react-redux';

const LocationMap = ({locations}) => (
    //render something based on the props
);

const mapStateToProps = (state, props) => {
    // state.admin contains all the registered resources with their name as a key
    const locationsResource = state.admin.locations;

    // every resource has a "data" object with all entities mapped by id
    const allLocations = locationsResource.data;        

    // every resource has a "list" object that has an array of ids of the currently filtered entities
    const filteredIDs = locationsResource.list.ids;

    return {
        locations: filteredIDs.map(id => allLocations[id]),
    };
};

// connect your component to the store
export default connect(mapStateToProps)(LocationsList)

mapStateToPropsストアの現在の状態とコンポーネントの props を受け取り、コンポーネントに渡される追加の props を含むオブジェクトを返す関数です。

admin-on-restまた、このアプローチは、コンポーネントの実装の内部を使用します。使用する必要がある props の一部は API の一部ではなく、最悪の場合、突然変更される可能性があり、新しいバージョンの に更新すると、アプリが動作しなくなる可能性がありますadmin-on-rest。そのため、重大な変更が発生した場合は、実装を更新する必要がある場合があることに注意してください。

フィルター自体にのみアクセスしたい場合はyourResourceName.list.params.filter、フィルターの名前をキーとして、値を値として、すべてのリソースに保存されます...

ヒント:admin-on-restアプリのストア内のデータが実際の例でどのように保存されるかを確認したい場合は、 Google Chrome 用のRedux DevToolsをインストールし、 admin-on-rest デモを開きます。その後、検査バーを開くと、redux ストアのコンテンツと、アプリとの対話時にディスパッチされるすべてのアクションを確認できる新しいタブ redux が表示されます。このようにして、どのように機能するかを理解するのがはるかに簡単になりますadmin-on-rest。

于 2017-07-08T15:18:39.937 に答える