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

How to pass a variable from one method to another in React

本文关键字：方法一个另一个 React 变量更新时间：2023-09-26

我有一个名为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>
        );
    }
});

var只存在于该（词汇）范围内 - 即在您的onClick函数（以及任何嵌套函数）中。

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

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