不能結合參考這陣營

Question

我試着去創建一個包含狀態的活動ReactList，但當稱爲

itemRenderer={this.renderItemOtherActi} 

我tryed我不能管理從內部renderItemOtherActi引用變量狀態使用

itemRenderer={::this.renderItemOtherActi} 

或

itemRenderer={this.renderItemOtherActi.bind(this)} 

但是毫無效果，我敢肯定，這是一個非常d umb錯誤，提前抱歉im新的JSX。非常感謝！

import React from 'react'; 
import ReactList from 'react-list'; 
import './css/bootstrap.min.css'; 
import './css/small-business.css'; 
import Navbar from './Navbar'; 
import Footer from './Footer';  

class Activity_Page extends React.Component { 

    state = { 
     my_activities: [ 
      { 
       name:"Yoga" 
      }, 
      { 
       name:"Crossfit" 
      }], 
     other_activities: [ 
      { 
       name:"Zamba" 
      }, 
      { 
       name:"Spinnig" 
      }] 
    };  

    return_state(){ 
     return this.state; 
    }  


    renderItemMyActi(index, key) { 
     return <div key={key}>Yoga</div>; 
    }  

    renderItemOtherActi(index, key) { 
     return <div key={key}>{this.state.my_activities[index].name}</div>; 
    }  

    render() { 

     return (
     <div> 
      <Navbar /> 
      <div className="Activity_Page container"> 
       <div className="row"> 
        <div className="col-lg-10"> 
         <h3>Actividades a las que estoy inscripto</h3> 
         <div style={{overflow: 'auto', maxHeight: 400}}> 
          <ReactList 
           itemRenderer={this.renderItemMyActi} 
           length={this.state.my_activities.length} 
           type='uniform' 
          /> 
         </div> 
         <h3>Actividades a las que no estoy inscripto</h3> 
         <div style={{overflow: 'auto', maxHeight: 400}}> 
          <ReactList 
           itemRenderer={this.renderItemOtherActi} 
           length={this.state.other_activities.length} 
           type='uniform' 
          /> 
         </div> 
        </div> 
       </div> 

       <footer className="Footer"> 
        <div className="row"> 
         <div className="col-lg-12"> 
          <Footer /> 
         </div> 
        </div> 
       </footer> 
      </div> 
     </div> 
     ); 
    } 
}  

export default Activity_Page; 

Answer 1

你要麼

將其綁定在構造函數中：

constructor(props){ 
    super(props); 
    this.renderItemOtherActi=this.renderItemOtherActi.bind(this); 
} 

，或者使用箭頭功能

renderItemOtherActi = (index, key) => { 
    // ... 
}