動的

Question

編集を反応させるのに必要です。私は、それぞれ異なるコンポーネントのラッパーを作成し、必要なコレクションを必要とし、メイン、汎用コンポーネントの小道具としてそれらを渡されました。

は我々が反応使って3つの非常に同様の構成要素を作り、特定のコンポーネントに応じて、いくつかのマイナーな修正を加えた3つの本当に似たファイルを持つことになりました。
私の質問はどのように私はそれを行うことができ、本当に簡単です（ただし、実装するのは難しいかもしれません）、私たちはそのベースに同じファイルを利用したいので、私は、動的に使用する必要があり、変数を初期化？上記のコードで

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

あなたはそれで遊ぶことができます。