javascript - --如何让这个 React/Redux 代码变得 DRY

Question

我有重复的代码，但我不知道如何使其 DRY(不要重复自己)。

这里有两个组件通过 dispatch() 和 React 的自动重新渲染进行“对话”。

this.map 重复两次。

此模块将在点击时调度操作。

import React from 'react';
import { connect } from 'react-redux';
class Icon extends React.Component {
  constructor(props) {
    super(props);
    this.map = {
      paper: 'bg_paper.jpg',
      light_wood: 'bg_wood.jpg',
      graph: 'bg_graph.jpg'
    };
  }

  flip () {
    this.props.dispatch({type: 'updateIcon', bg_key: $A.nextKey(this.map, this.props.state.bg_key)});
  }

  render () {
    const style = {
      // ... snip
    }

    return (
      <img id = 'bar_icon' onClick={this.flip.bind(this)} style={style} src='_images/sv_favicon.svg'/>
    )

  }
}

const mapStateToProps = state => {
  return {
    state: state.Icon
  }
}

export default connect(mapStateToProps)(Icon);

而该组件将自动重新渲染。一切都很好。我只是想让它干燥。

import React from 'react';
import { connect } from 'react-redux';

// ... snip

class FrameBody extends React.Component {

  constructor(props) {
    super(props);
    this.map = {
      paper: 'bg_paper.jpg',
      light_wood: 'bg_wood.jpg',
      graph: 'bg_graph.jpg'
    };
  }

  render () {

    const style = {
      backgroundImage: 'url(' + '_images/' + this.map[this.props.state.bg_key] + ')'
    };

    return (

      <div id='contents' style={style}>
      </div>

    )
  }
}

const mapStateToProps = state => {
  return {
    state: state.Icon
  }
}

export default connect(mapStateToProps)(FrameBody);

我该怎么做才能不存在两个 this.map 实例？

Answer 1

您可以将 this.map 的逻辑提取到类函数中。

getBackgroundImageKey = () => {
  const backgroundMap = {
    paper: 'bg_paper.jpg',
    light_wood: 'bg_wood.jpg',
    graph: 'bg_graph.jpg'
  }
  return backgroundMap[this.props.bg_key]
}

更进一步，添加另一个函数来返回 URL 并添加字符串插值。

getBackgroundImageURL(){
  const backgroundMap = {
    paper: 'bg_paper.jpg',
    light_wood: 'bg_wood.jpg',
    graph: 'bg_graph.jpg'
  }
  return `url(_images/${backgroundMap[this.props.bg_key]})`;
}

这将让你定义这样的样式

const backgroundImage = this.getBackgroundImageURL()
const style = { backgroundImage };