Question

我有一个名为TopicsList的组件，其中onClick方法中有一个名为topicsID的变量。我想将变量传递给渲染方法topicsID = {topicsID}但是它给出了未定义的错误。

var TopicsList = React.createClass({

    getInitialState: function () {
        return {
            isTopicClicked : false,
            topicPages
        };
    },

    onClick: function (topicID) {
        this.setState({isTopicClicked : true});
        var topicsID = topicID;
    },

    render: function () {
        return (
            <div>
                <div className="row topic-list">
                    <SingleTopicBox 
                        topicID="1" 
                        onClick={this.onClick} 
                        label="Topic"
                        />
                    <SingleTopicBox 
                        topicID="2" 
                        onClick={this.onClick} 
                        label="Topic"
                        />
                    <SingleTopicBox 
                        topicID="3" 
                        onClick={this.onClick} 
                        label="Topic"
                        />
                    <SingleTopicBox 
                        topicID="4" 
                        onClick={this.onClick} 
                        label="Topic"
                        />
                </div>
                <div className="row">
                { this.state.isTopicClicked ? <SelectedTopicPage topicsID={topicsID} topicPages={topicPages} /> : null }
                </div>
            </div>
        );
    }
});

Answer 1

var只存在于（词汇）范围内 - 即 in 你的onClick函数（和任何嵌套函数）。

您应该将其分配给this，即this.topicsID。或者，在这种情况下，您最好将状态设置为状态，因为您要重新渲染子组件。

onClick = (topicID) => {
  this.setState({ topicsID });
},

render() {
   const { topicsID } = this.state;
   return (
     <div>
       {topicsID && <SelectedTopicPage topicsID={topicsID} topicPages={topicPages} /> }
     </div>
   );
}

如何在React中将变量从一个方法传递到另一个方法

1 个答案: