使用onClick功能交流兩個React子組件

Question

好的，我將盡力解釋我的項目是如何設置的，以便您可以適當地幫助我確定如何進行此配置。

我有一個parent component ，它是一個smart component 。 通過該組件，可以訪問我商店中的所有數據。

class DashboardPage extends React.Component {
  componentDidMount() {
   this.props.getTips();
  } 

  render() {
    return (
      <div>
        <div className="row">
          <div className="col-sm-7">
            <ContentBox
              title="The Scoop"
              footerText="Submit a Story"
              showSlider
              content={<TipOfTheDay tips={this.props.tips} />}
            />
          </div>
        </div>
      </div>
    )
  }
}

DashboardPage.propTypes = {
  getTips: PropTypes.func
}

function mapStateToProps(state, ownProps) {
  tips: state.tips
}

function mapDispatchToProps(dispatch) {
  return {
    getTips: () => { dispatch(tipActions.loadTips());} ## This hits tipActions and runs the `action creator`: loadTips(). Which returns all tips from api. 
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(DashboardPage);

如您所見，我在smart component內部包括了兩個dumb components smart component ， <ContentBox/>和<TipOfTheDay/> 。 在dashboardPage上，大約有7個<ContentBox/>組件，每個組件都繼承一個特殊的頁眉/頁腳標題，並通過showSlider布爾值告知是否顯示頁腳。 這是<ContentBox/>樣子：

import React, {PropTypes} from 'react';
import Footer from './ContentBoxFooter';

const ContentBox = ({title, footerText, showSlider, content}) => {
  return (
    <div style={styles.root} className="col-sm-12">
      <div style={styles.header} className="row">
        <h3 style={styles.header.title}>{title}</h3>
        <span style={styles.header.arrow} />
      </div>
      {content}
      <Footer footerText={footerText} showSlider={showSlider} />
    </div>
  );
};

ContentBox.propTypes = {
  title: PropTypes.string,
  footerText: PropTypes.string,
  showSlider: PropTypes.bool,
  content: PropTypes.object
};

export default ContentBox;

這是頁腳：

import React, {PropTypes} from 'react';
import styles from './contentBoxStyles';
import Previous from './svg/Previous';
import Next from './svg/Next';
import Add from './svg/Add'; 
import consts from '../../styles/consts';

const ContentBoxFooter = ({footerText, showSlider}) => {
  if (footerText != undefined) {
    return (
      <div style={styles.footer} className="row">
        {
          showSlider ? 
            <div> 
              <Previous fillColor={consts.orange} height="20px" width="20px"/>
              <span style={styles.bar}>|</span>
              <Next fillColor={consts.orange} width="20px" height="20px"/>
            </div> : <div style={styles.emptyArrow} />
        }
        <div style={styles.footer.link}>
          <span style={styles.footer.link.text}>{footerText}</span>
          <Add fillColor={consts.orange} height="24px" width="24px" />
        </div>
      </div>
    );
  } else {
    return(null);
  }
};

ContentBoxFooter.propTypes = {
  footerText: PropTypes.string,
  showSlider: PropTypes.bool
};

export default ContentBoxFooter;

很少！ 所以這是我需要添加onClick功能的地方。 需要將此功能添加到作為SVG的<Previous/>和<Next/>組件中。 我試圖做的是為插入的技巧創建一個滑塊。顯然，會有<Footer/>組件需要相同的功能，但除了技巧之外，它們還控制其他數據。 因為我是React ＆ Redux新手，所以我不確定如何執行此操作，而不僅僅是執行此操作，而是以“ Redux”的方式執行。

如何獲得嵌套在其他dumb components中的這兩個svg組件，它們是dumb components ，以對頁面上的特定數據執行onClick功能？ 我希望這是有道理的。 為了更加清楚，這是我在<TipOfTheDay/>組件中所做的工作：

const tipOfTheDay = ({tips}) => {
  return (
    <div style={styles.tipBody} className="row">
      {
        tips.map(function(tip, key) {
          return (
            <div key={key} className="myTips">
              <h3 style={styles.tipBody.header}>{tip.title}</h3>
              <p style={styles.tipBody.content}>{tip.content}</p>
            </div>
          );
        })
      }
    </div>
  );
};

tipOfTheDay.propTypes = {
  tips: PropTypes.array.isRequired
};

export default tipOfTheDay;

感謝您在閱讀/回復/協助此問題時所花的任何時間。 我是一個相當新的開發人員，對我來說這也是新技術。

Answer 1

我不確定您如何實現下一個和上一個組件，但是由於您使用了React-Redux，因此您可以創建額外的容器來包裝這些組件並將Redux Action傳遞給它們，例如：

// PreviousComponent.jsx
var Previous  React.createClass({
    propTypes: {
        goToPrevious: React.PropTypes.func,
    },

    render: function() {
        return (
            <div onClick={this.props.goToPrevious}>
                ...
            </div>
        );
    }
};

export default Previous;

//PreviousContainer.jsx
import ReactRedux from 'react-redux';
import Previous from './PreviousComponent';

var mapStateToProps = (state, props) => {
    return {};
};

var mapDispatchToProps = (dispatch) => {
    return {
        goToPrevious: () => {
            dispatch(Actions.goToPrevious());
        },
    }
};

var PreviousContainer = ReactRedux.connect(
    mapStateToProps,
    mapDispatchToProps
)(Previous);


export default PreviousContainer;

通過直接在組件周圍添加容器包裝器，您可以將redux操作連接到上一個圖像/幻燈片/任何內容，直接進入您的React組件。 然后，當您想在ContentBoxFooter中使用該動作時，請導入PreviousContainer並將其放置在想要Previous組件的位置，例如：

//ContentBoxFooter.jsx

import PreviousContainer from './PreviousContainer'

const ContentBoxFooter = ({footerText, showSlider}) => {
  if (footerText != undefined) {
    return (
      <div style={styles.footer} className="row">
        {
          showSlider ? 
            <div> 
              /*
               * Add the PreviousContainer here where before you were only using your regular Previous component.
               */
              <PreviousContainer fillColor={consts.orange} height="20px" width="20px"/>
              <span style={styles.bar}>|</span>
              <Next fillColor={consts.orange} width="20px" height="20px"/>
            </div> : <div style={styles.emptyArrow} />
        }
        <div style={styles.footer.link}>
          <span style={styles.footer.link.text}>{footerText}</span>
          <Add fillColor={consts.orange} height="24px" width="24px" />
        </div>
      </div>
    );
  } else {
    return(null);
  }
};

ContentBoxFooter.propTypes = {
  footerText: PropTypes.string,
  showSlider: PropTypes.bool
};

通過將Next和Previous組件都包裝在將動作傳遞給它們的容器中，您可以將Redux動作直接連接到組件中，而不必從應用程序的根組件傳遞它們。 另外，這樣做還可以使您隔離調用某些動作的位置。 您的上一個按鈕可能是唯一要調用上一個動作的組件，因此通過將其放在該組件周圍的容器包裝中，可以確保僅在需要的地方使用上一個動作。

編輯：

如果必須處理多個動作，最好在更高級別上定義它們。 在這種情況下，由於ContentBox是常見的突破點，因此我將為每種類型的內容框定義單獨的Previous操作，並將它們傳遞到每個ContentBox實例中：

var DashboardApp =  React.createClass({
    propTypes: {
        TipsPrevious: React.PropTypes.function,
        NewsPrevious: React.PropTypes.function,
    },

    render: function() {
        <div>
            <ContentBox
                previousAction={this.props.TipsPrevious}
                contentType='Tips'
            />
            <ContentBox
                previousAction={this.props.NewsPrevious}
                contentType='News'
            />
            ...
       </div>
    },
});

在子組件中向下傳遞操作，直到到達上一個組件，然后將該操作附加到上一個組件上的“ onClick”處理程序。

這背后的想法是，您希望將參數的范圍限制為盡可能少的代碼。 例如，如果您在頁面上添加了一個顯示用戶信息的配置文件組件，則可能希望在該組件周圍添加一個容器，並傳入與用戶相關的信息/操作，而不將該信息傳遞給應用程序的其余部分。 通過這樣做，可以更輕松地將信息集中在需要的地方。 如果必須修復錯誤，它還可以幫助您弄清代碼中發生了什么更改/操作。

在上面的示例中，如果儀表板組件是您的根組件，則只需將Redux操作傳遞到包裝它的容器中。 但是，如果儀表板組件本身是嵌套組件，請通過自定義容器將操作傳遞到其中，以使這些操作不會傳播到不需要查看它的代碼中：

<AppRoot>
    <PageHeader/>
    <DashboardContainer />
    <PageSidebar />
    <PageFooter />
</AppRoot>