Javascript React中的动态需求

编辑：我为每个不同的组件创建了包装，需要必要的集合，并将它们作为道具传递给一个主要的通用组件。

我们使用React制作了3个非常相似的组件，最终得到了3个非常相似的文件，根据具体组件进行了一些小的修改。
我的问题非常简单（但可能很难实现），我们希望为该基础使用相同的文件，所以我想动态使用requires并初始化变量，我该如何做

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

easyGrid({
    gridName: "protocolSelectedCollection"
});

例如，在上面的代码中，我需要一个不同于/collections/的文件，具体取决于组件，并且我还希望以不同的方式命名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>
        );
    }

});

var React=require（'React'）；
const Utils=需要（“Utils”）；
var RowCt=require（“反应堆/src/FlexGrid/components/Layout/Row/Row”）；
var Col=require（“反应堆/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（“反应堆/src/Store/Store”）；
var Provider=要求（“反应重复”）。提供程序；
var FormControl=require（'reactor/src/Form/components/Atoms/FormControl/FormControl'）；
var FormGroup=要求（“反应器/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=要求（“何时”）；
var ProtocolSelectedCollection=require（“../collections/ProtocolSelectedCollection”）；
var selectedCollection=新协议selectedCollection（）；
var baseURL=Utils.getSystemUrl（）；
随和的({
gridName:“protocolSelectedCollection”
});
变量游标指针={
光标：“指针”
};
var rowWrapper={
边框宽度：“0px 0px 1px”，
边框样式：“实心”，
边框颜色：“rgb（204204204）”，
marginBottom：“10px”，
光标：“指针”
};
要求（“./ProtocolAuthorizedWidget.css”）；
要求（“反应器CMP/tokens/general”）；
module.exports=React.createClass({
componentDidMount（）{
var me=这个；
return me.loadData（）；
},
filterValue:“”，
loadData（）{
var me=这个；
返回me.refs.async.getWrappedInstance（）.loadData（true）；
},
getChildren（数据）{
var me=this，protocolsData=Array.isArray（数据）？数据：[]，协议=[]；
if（！protocolsData.length）{
返回(
{SE.t（103092）}
);
}
protocolsData.map（函数（元素，i）{
推送协议(
);
});
返回(
{协议}
);
},
startProtocol（cdproctype）{
var url=baseURL+“/document/dc_protocol/protocol_data.php？caption=&action=1&cdproctype=“+cdproctype；
var宽度=700；
var高度=515；
openPopUp（url、宽度、高度）；
},
setRowState（cdproctype，事件）{
var me=这个；
如果（事件=='over'）{
$（me.refs.async.getWrappedInstance（）.refs['protocolImage'+cdproctype]）.hide（）；
$（me.refs.async.getWrappedInstance（）.refs['protocol'+cdproctype]）.addClass（“se valign btn btn success seicon play Button rowImage”）；
}else if（事件==‘离开’）{
$（me.refs.async.getWrappedInstance（）.refs['protocolImage'+cdproctype]）.show（）；
$（me.refs.async.getWrappedInstance（）.refs['protocol'+cdproctype]）.removeClass（）；
} 
},
过滤器协议（e）{
var me=这个；
var enterKeyCode=13；
如果（如目标）{
me.filterValue=e.target.value；
}
如果（e.nativeEvent.keyCode===enterKeyCode）{
me.loadData（）；
}
},
getData（）{
var me=this，deferred=when.deferred（）；
变量oid=me.props.CardOid；
var searchTerm=me.filterValue；
selectedCollection.fetch（{oid:oid，searchTerm:searchTerm}）。然后（函数（结果）{
延迟。解决（结果）；
});
回报。承诺；
},
render（）{
var me=这个，搜索过滤器；
搜索筛选器=(
);
返回(
{searchFilter}
);
}
});

如果你的组件非常相似，你可以创建一个单独的组件，它根据道具执行一些操作并呈现一些结果

给我一些道具。在你的组件内部，做你在这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>
     )
  }
}