javascript/ES6でディレクトリの内容をリストアップするにはどうしますか？Reactのリストディレクトリ
私はリアクションを使用してウェブサイトを開発しており、サイトにはイメージギャラリーがあります。今度はこのギャラリーを動的にしたいので、画像を追加するたびにコードを更新する必要はありません。私は各ギャラリーのための別々のディレクトリにウェブページをホストしているサーバーに格納されている画像を持っていて、すべてのディレクトリには画像がいくつかあります。私の現在の解決策は、どの画像がどのギャラリーに属しているかすべてをハードコードすることですが、より良い解決策が必要です。
私はhttps://github.com/neptunian/react-photo-galleryを使用しています。私はアクセス権があり、データベースを使ってファイルパスを保存することもできますが、別の解決策がある場合は、イメージを追加するためのAPIを作成する必要がなくなるように使います。
JSXが反応して、それらの上にマッピングするためにArray.mapを使用してクライアント側であるので、ファイルは実際にサーバーから読み取られています。したがって、クライアントからのajax呼び出しを追加するだけで、サーバーがimg srcアドレスで応答します。だから、のようなもの：
componentDidMount() {
$.ajax({
method: "GET",
url: "http://adsafasdf.com/imagecategory"
}).then(function(response) {
this.setState({ imagesArray: JSON.parse(response) })
});
}
render() {
const images = this.state.imagesArray.map((object) => {
return <img src={object.src} />;
});
return (
<div>
{ images }
</div>
)
}
は、私はそこにいくつかのエラーがあるかもしれませんが、あなたのアイデアを得る必要があります。そして、あなたがクリックしたカテゴリから持ち込むべきimagecategoryは、少なくともあなたがそれをやっている方法だと思います。このように、すべてが完全に動的でなければなりません。
PS：componentDidMountは、その呼び出しを行うのに適していない場合があります。クリックハンドラ関数などを使用する必要があります。基本的には、ユーザーがカテゴリをクリックし、カテゴリをURLにロードし、ajax関数を呼び出し、新しいイメージでsetStateを呼び出し、コンポーネントとその子を再描画するようにします。 – stevelacerda7
この回答とOPに関するコメントは、私が使い終わったものです。提案したように、GETリクエストparametreとして提供されたディレクトリで 'scandir（）'を実行し、結果をJSONとして返すPHPスクリプトをサーバ上に作成しました。 – Highhand
データをワイヤで送信する前にプルーニングする必要があります。その後、あなたはImage要素を呼び出すことができるものにマッピングし、それに応じて画像をレンダリングすることができます。あなたはReduxのであり、かつ状態で保存された写真を使用する場合は、配列内の写真とそれ以外のことができますsetState、Reduxのストアを更新し、
サーバーで実行できます。そのため、特定のディレクトリにあるファイルをリストし、それを応答として返すサーバスクリプトへのapi呼び出しを行います。 – error404
どうも@ error404は言った。単純なサーバースクリプトであれば、 '<？php print json_encode（scandir（getcwd（）））;？>'のように見えます。 and ..（現在のディレクトリと親ディレクトリ）。シンプルで使いやすい形式のデータを提供します。 –