動態需要做出反應

Question

編輯：我創建包裝爲每個不同的組件，所需的必要收集，並通過他們作爲道具爲主，通用組件。

我們做了使用陣營3個非常相似的部件，並結束了其與一些小的修改三個真類似的文件，這取決於特定的組件。
我的問題很簡單（但可能很難實現），我們想爲該基礎使用相同的文件，所以我想要動態使用require，並初始化變量，我該怎麼做呢？

var ProtocolSelectedCollection = require("../collections/ProtocolSelectedCollection"); 
var selectedCollection = new ProtocolSelectedCollection(); 
var baseURL = Utils.getSystemUrl(); 

easyGrid({ 
    gridName: "protocolSelectedCollection" 
}); 

在上面的代碼中，例如，我想從/集合/，取決於在組件上需要不同的文件，並且我也想以命名gridName不同。
那麼，我該怎麼做呢？如果需要，我會發布更多的代碼，或清除任何疑問。
所以這裏是完整的組件，它非常小。

var React = require('react'); 

const Utils = require("Utils"); 

var RowCt = require("reactor/src/FlexGrid/components/Layout/Row/Row"); 
var Col = require("reactor/src/FlexGrid/components/Layout/Col.jsx"); 
var Row = require("reactor/src/FlexGrid/components/Layout/Row/RowPresentation.jsx"); 
var Box = require("reactor/src/FlexGrid/components/Layout/Box.jsx"); 
var ContentLabel = require("reactor/src/Atomic/components/Mols/ContentLabel.jsx"); 
var AsyncLoading = require("reactor/src/Atomic/components/Helpers/AsyncLoading/AsyncLoading"); 
var Store = require("reactor/src/store/store"); 
var Provider = require("react-redux").Provider; 
var FormControl = require('reactor/src/Form/components/Atoms/FormControl/FormControl'); 
var FormGroup = require("reactor/src/Form/components/Mols/FormGroup"); 
var InputAddon = require("reactor/src/Form/components/Atoms/InputAddon"); 
var InputGroup = require("reactor/src/Form/components/Mols/InputGroup/InputGroup.jsx"); 
var easyGrid = require("reactor/src/FlexGrid/components/Helpers/EasyGrid"); 
var when = require("when"); 

var ProtocolSelectedCollection = require("../collections/ProtocolSelectedCollection"); 
var selectedCollection = new ProtocolSelectedCollection(); 
var baseURL = Utils.getSystemUrl(); 

easyGrid({ 
    gridName: "protocolSelectedCollection" 
}); 

var cursorPointer = { 
    cursor: 'pointer' 
}; 

var rowWrapper = { 
    borderWidth: '0px 0px 1px', 
    borderStyle: 'solid', 
    borderColor: 'rgb(204, 204, 204)', 
    marginBottom: '10px', 
    cursor: 'pointer' 
}; 


require("./ProtocolAuthorizedWidget.css"); 
require("reactorCmps/tokens/general"); 

module.exports = React.createClass({ 
    componentDidMount() { 
     var me = this; 

     return me.loadData(); 
    }, 

    filterValue: "", 

    loadData() { 
     var me = this; 

     return me.refs.async.getWrappedInstance().loadData(true); 
    }, 

    getChildren(data) { 
     var me = this, protocolsData = Array.isArray(data) ? data : [], protocols = []; 

     if (!protocolsData.length) { 
      return (
       <span>{SE.t(103092)}</span> 
      ); 
     } 

     protocolsData.map(function(element, i) { 
      protocols.push(
       <div style={rowWrapper} 
        key={i} 
        onMouseLeave={me.setRowState.bind(me, element.cdproctype, 'leave')} 
        onMouseOver={me.setRowState.bind(me, element.cdproctype, 'over')} 
        onClick={me.startProtocol.bind(me, element.cdproctype)} 
        title={SE.t(104859)}> 

        <RowCt 
         oid={element.cdproctype} 
         selectType={0} 
         multireducerKey={"protocolSelectedCollection"}> 

         <Col xs sm md lg> 
          <Row nested> 
           <Col xs={1} sm={1} md={1} lg={1} > 
            <div ref={"protocol" + element.cdproctype}></div> 
            <img ref={"protocolImage" + element.cdproctype} 
             src={baseURL + "/common/images/type_icons/64x64/" + element.fgicon + ".png"} 
             className="rowImage" /> 
           </Col> 
           <Col xs={11} sm={11} md={11} lg={11}> 
            <Box> 
             <ContentLabel title={element.idproctype} text={element.nmtitle}></ContentLabel> 
            </Box> 
           </Col> 
          </Row> 
         </Col> 
        </RowCt> 
       </div> 

      ); 
     }); 

     return (
      <div> 
       <div> 
        {protocols} 
       </div> 
      </div> 
     ); 
    }, 

    startProtocol(cdproctype) { 
     var url = baseURL + "/document/dc_protocol/protocol_data.php?caption=&action=1&cdproctype=" + cdproctype; 
     var width = 700; 
     var height = 515; 

     Utils.openPopUp(url, width, height); 
    }, 

    setRowState(cdproctype, event) { 
     var me = this; 

     if (event === 'over') { 
      $(me.refs.async.getWrappedInstance().refs['protocolImage' + cdproctype]).hide(); 
      $(me.refs.async.getWrappedInstance().refs['protocol' + cdproctype]).addClass("se-valign btn btn-success seicon-play playButton rowImage"); 
     } else if (event === 'leave') { 
      $(me.refs.async.getWrappedInstance().refs['protocolImage' + cdproctype]).show(); 
      $(me.refs.async.getWrappedInstance().refs['protocol' + cdproctype]).removeClass(); 
     } 
    }, 

    filterProtocol(e) { 
     var me = this; 
     var enterKeyCode = 13; 

     if (e.target) { 
      me.filterValue = e.target.value; 
     } 

     if (e.nativeEvent.keyCode === enterKeyCode) { 
      me.loadData(); 
     } 
    }, 

    getData() { 
     var me = this, deferred = when.defer(); 
     var oid = me.props.CardOid; 
     var searchTerm = me.filterValue; 

     selectedCollection.fetch({oid: oid, searchTerm: searchTerm}).then(function(results) { 
      deferred.resolve(results); 
     }); 

     return deferred.promise; 
    }, 

    render() { 
     var me = this, searchFilter; 

     searchFilter = (
      <div> 
       <div> 
        <FormGroup> 
         <InputGroup> 
          <InputAddon 
           onClick={me.loadData} 
           style={cursorPointer} 
           className="seicon-search" 
           title={SE.t(214653)} 
           > 

          </InputAddon> 
          <div> 
           <FormControl 
            onKeyPress={me.filterProtocol} 
           /> 
          </div> 
         </InputGroup> 
        </FormGroup> 
       </div> 
      </div> 
     ); 

     return (
      <div> 
       <div> 
        {searchFilter} 
       </div> 

       <Provider store={Store} withRef> 
        <AsyncLoading 
         ref="async" 
         oid={"protocolSelectedCollection" + me.props.CardOid} 
         fireLoad 
         loadFn={me.getData} 
         getChildren={me.getChildren} 
        /> 
       </Provider> 

      </div> 
     ); 
    } 

}); 

Answer 1

如果你的組件是真的類似，您可以創建one single component，做一些動作，並呈現基於道具的一些結果。

只需通過一些道具。在你的組件中，像你一樣在這3個組件中分別做你的動作。在這裏，我想演示如何使用道具來呈現來自同一組件不同的結果：

class MixedComponent extends React.Component { 
    constructor(props) { 
    super(props) 
    this.state = {type: ''} 
    } 

    componentDidMount() { 
    if (this.props.prop1) // if prop1 exists 
     this.setState({type: 'do something'}) 
    else 
     this.setState({type: 'Something else'}) 
    } 

    render() { 
    let result; 
    if (this.props.prop1) { 
     result = (
     <div> 
      Render this component based on <strong>{this.props.prop1}</strong> 
      <p>Type -> {this.state.type}</p> 
     </div> 
    ) 
    } else if (this.props.prop2) { 
     result = (
     <div> 
      Render this component based on <strong>{this.props.prop2}</strong> 
      <p>Type -> {this.state.type}</p> 
     </div> 
    ) 
    } 
    else if (this.props.prop3) { 
     result = (
     <div> 
      Render this component based on <strong>{this.props.prop3}</strong> 
      <p>Type -> {this.state.type}</p> 
     </div> 
    ) 
    } 
    return result 
    } 
} 

而在你的主要成分使用不同的道具這個組件：

class Main extends React.Component { 
    render() { 
    return (
     <div> 
     <h4>Render different results based on props with same component!</h4> 
     <hr/> 
     <MixedComponent prop1="Hello,"/> 
     <MixedComponent prop2="Dear"/> 
     <MixedComponent prop3="World!"/> 
     </div> 
    ) 
    } 
} 

這僅僅是一個示範使用道具。你可以從這裏得出想法。這裏是codepen工作示例：

https://codepen.io/anon/pen/dREqZK?editors=1010

你可以用它玩。