web-dev-qa-db-ja.com

Reactで、動的変数をconst CSSスタイルリストに渡す方法は？

react-dropzone を使用して、ユーザーがプロフィール写真をアップロードできるようにしています。

私はカスタムCSSを次のように定義します。

const dropzoneStyle = {
  width: `200px`,
  height: `200px`,
  backgroundColor: `#1DA1F2`,
};

DropZone入力をレンダリングするメソッド内で、ユーザーがアップロードする画像を選択した後に入力されるファイルプレビューであるかどうかを検出できます。

File.previewが存在する場合は、file.previewをdropzoneStyleに送信して、背景画像がCSSに追加されるようにします。

const renderDropzoneInput = (field) => {
  const files = field.input.value;
  let dropzoneRef;

  if (files[0]) {
    console.log(files[0].preview)
  }

  return (
    <div>
      <Dropzone
        name={field.name}
        ref={(node) => { dropzoneRef = node; }}
        accept="image/jpeg, image/png"
        style={dropzoneStyle}
      >

Reactでfiles[0].previewをスタイルdropzoneStyleに渡すにはどうすればよいですか？

reactjsreact-dropzone
5
AnApprentice

files[0].previewはファイル（画像）URLを返します。新しいスタイルを設定し、それをDropzoneコンポーネントに渡すことができるはずです。

これらの線に沿った何か：

const renderDropzoneInput = (field) => {
  const files = field.input.value;
  let dropzoneRef;

  render() {
    let dropzoneStyle = {
      width: `200px`,
      height: `200px`,
      backgroundColor: `#1DA1F2`,
    };

    if (files[0]) {
      dropzoneStyle = {
        width: `200px`,
        height: `200px`,
        backgroundColor: `#1DA1F2`,
        backgroundImage: `url(${files[0].preview})`,
        // or to use a fixed background image
        // backgroundImage: `url(/path/to/static/preview.png)`,
        backgroundPosition: `center center`,
        backgroundRepeat: `no-repeat`
      };
    }

    return (
      <Dropzone
        name={field.name}
        ref={(node) => { dropzoneRef = node; }}
        accept="image/jpeg, image/png"
        style={dropzoneStyle}
      />
    )
  }
}

スプレッド演算子を使用して、DRYこのコードを少し使用できます。

let dropzoneStyle = {
  width: `200px`,
  height: `200px`,
  backgroundColor: `#1DA1F2`,
};

if (files[0]) {
  dropzoneStyle = {
    ...dropzoneStyle,
    backgroundImage: `url(/path/to/static/preview.png)`,
    backgroundPosition: `center center`,
    backgroundRepeat: `no-repeat`
  };
}
4
Brett DeWoody

私は通常、スタイルをスタイルオブジェクトを返す矢印関数として定義し、スタイルに必要なパラメータをすべて渡します。これにうまく機能する矢印関数からオブジェクトリテラルを返すための省略表記があります。

const style = () => ({});

省略形を使用する場合は、三項演算子のみを使用することを忘れないでください。使用しない場合は、オブジェクトを明示的にreturnする必要があります。

だから、あなたのスタイルのために：

const dropzoneStyle = (isPreview) => ({
  width: `200px`,
  height: `200px`,
  backgroundColor: `#1DA1F2`,
  backgroundImage: (isPreview) ? 'url(/path/to/image.jpg)' : 'none',
});

これにより、画像がisPreview trueであることが追加されますが、そうでない場合は空白のままになります。

次に、コンポーネントで、スタイルが適用される関数を呼び出します。

return (
  <div>
    <Dropzone
      {...otherProps}
      style={ dropzoneStyle(isPreview) }
    >
  </div>
);
7
Joe Dalton