Question

我试图创建一个包含状态活动的ReactList，但我无法在调用

时从renderItemOtherActi内部引用变量状态

itemRenderer={this.renderItemOtherActi}

我尝试使用

itemRenderer={::this.renderItemOtherActi}

或

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

但没有任何效果，我确定这是一个非常愚蠢的错误，对不起提前我是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) => {
  // ...
}

无法绑定在React中引用它

1 个答案: