通過名稱或其他東西獲取React.js組件

Question

我是React新手，想知道是否有某種方法可以直接使用某個組件的名稱，ID，密鑰，任何東西來操作。

例如，我創建簡單的遊戲，並有很多「細胞」。 Cell有state.cellState的enabled,disabled或active。

一旦單元格被點擊，它就會變成active並在Enter被按下之後 - disabled。

這就是要點 - 是否有可能獲得活動的細胞並使用它？

我正在使用Electron，Enter等快捷鍵已經工作。

編輯 - 下面是一些代碼

class Main extends React.Component { 
render() { 
    let rows = []; 

    categories.forEach(function (category, i) { 
     rows.push(<Row categoryName={category} rowNo={i + 1} key={category}/>); 
    }); 

    return (
     <div className="clearfix" id="main"> 
      {rows} 
     </div> 
    ); 
} 

let Row = React.createClass({ 
render: function() { 
    let notes = [], 
     categoryId = this.props.rowNo; 

    bonuses.forEach(function (bonus, i) { 
     let id = 'cell_' + categoryId.toString() + (i + 1).toString(); 
     notes.push(<NoteCell bonus={bonus} id={id} key={id}/>); 
    }); 

    return (
     <div className="row clearfix"> 
      <CategoryCell categoryName={this.props.categoryName}/> 
      {notes} 
     </div> 
    ) 
} 
}); 

class CategoryCell extends React.Component { 
render() { 
    return (
     <div className="cell category"> 
      <h2> 
       {this.props.categoryName} 
      </h2> 
     </div> 
    ) 
} 
} 

let NoteCell = React.createClass({ 
getInitialState: function() { 
    return {active: true} 
}, 
render: function() { 
    return (
     <div className="cell tune" id={this.props.id} onClick={this.handleClick}> 
      <div className="tune-container"> 
       <img src="./static/note.png" className="note"/> 
      </div> 
      <h3 className="value">{this.props.bonus}</h3> 
     </div> 
    ) 
} 
}); 

所以部件initialy有enabled狀態並dinamically創建。 我如何獲得當前活動單元格並使用它？ 對格式化和ES2015 mixin抱歉。

Answer 1

這取決於你想要做什麼操作的時間和地點。

1. 如果你想這樣做前Cell組件內部的渲染，你可以簡單地檢查在currentState是否更新狀態之前活躍，做你的處理。
2. 如果您想要Cell組件內部的渲染，您可以將您的函數作爲回調傳遞給您在更新Cell狀態後調用的setState方法。
3. 如果您想從父視圖進行更改，您需要將Cell狀態提升到父視圖，然後應用篩選器以獲取「活動」單元狀態。一旦你有了對應active細胞的狀態，你可以改變你想要將重新呈現Cell情況下，這些狀態的（需要在Cell部件實現componentsWillReceiveProps()以反映這些變化）

這最有可能屬於第三種情況。您可以按照以下步驟將狀態拉出到級別。如果您想要執行Main組件的這些操作，則需要將狀態提升至Main組件。如果你能說出你想要做什麼有效的項目，我可以進一步解釋

class Main extends React.Component { 
     render() { 
      let rows = []; 

      categories.forEach(function (category, i) { 
       rows.push(<Row categoryName={category} rowNo={i + 1} key={category} />) 
      }); 

      return (
       <div className="clearfix" id="main"> 
        {rows} 
       </div> 
      ); 
     } 
    } 

    class Row extends React.Component { 
     constructor() { 
      this.state = { 
       categoryId: props.rowNo, 
       bonuses: props.bonuses, 
      } 
      props.bonuses.forEach((bonus, i) => this.state[i] = true) 
     } 

     handleActiveItems() { 
      var activeItems = this.bonuses.filter(x => x.status); 
      // Process active Items 
     } 

     handleClick(i) { 
      return (e) => { 
       var updatedState = Object.assign({}, this.state); 
       updatedState[i] = e.target.value; // Use state setting logic here 
       this.setState(updatedState); 
      } 
     } 

     render() { 
      let notes = []; 
      let categoryId = this.props.rowNo; 

      bonuses.forEach(function (bonus, i) { 
       let id = 'cell_' + categoryId.toString() + (i + 1).toString(); 
       notes.push(<NoteCell bonus={bonus} id={id} key={id} status={this.state.status} handleClick={this.handleClick(i).bind(this)} />); 
      }); 

      return (
       <div className="row clearfix"> 
        <CategoryCell categoryName={this.props.categoryName} /> 
        {notes} 
        <button onClick={this.handleActiveItems}>Click me to change all active buttons in this row</button> 
       </div> 
      ) 
     } 
    } 

    class CategoryCell extends React.Component { 
     render() { 
      return (
       < div className="cell category" > 
        <h2> 
         {this.props.categoryName} 
        </h2> 
       </div > 
      ) 
     } 
    } 

    class NoteCell extends React.Component { 
     constructor(props) { 
      this.state = { 
       id: props.id, 
       status: props.status 
      } 
      this.handleClick = props.handleClick; 
     } 

     componentWillReceiveProps(nextProps) { 
      this.setState(nextProps) 
     } 

     render() { 
      // Check status and render different types of NoteCell 
      return (
       <div className="cell tune" id={this.props.id} onClick={this.handleClick}> 
        <div className="tune-container"> 
         <img src="./static/note.png" className="note" /> 
        </div> 
        <h3 className="value">{this.props.bonus}</h3> 
       </div> 
      ) 
     } 
    }