Reactjs 在类组件内的何处分配变量？

我在react中有一个类组件。我试图声明一个包含数字的变量。然后在arrow函数中使用reference变量。唯一的问题是，在类级范围中分配变量时出错。

**我是个新手，还没有做过大量的JavaScript编程。如何声明此变量以便在arrow函数中使用

下面的完整代码：

class TabMenuButtons extends Component {
    constructor(props) {
        super(props);
        this.state = {
            rendersummaryAccordions: false,
            renderservicesAccordions: false,
            rendertravelAccordions: false, 
            renderratesAccordions: false, 
        };

    }


    let summaryCounter =  0;
   summaryAccordionsLogicGate = () => {

    this.setState({rendersummaryAccordions: true});
    console.log("summaryAccordionsLogicGate was called")
    summaryCounter = summaryCounter + 1;
  } 

  servicesAccordionsLogicGate = () => {
    this.setState({renderservicesAccordions: true});
    console.log("servicesAccordionsLogicGate was called")

  } 

  ratesAccordionsLogicGate = () => {
    this.setState({renderratesAccordions: true});
    console.log("ratesAccordionsLogicGate was called")

  } 

  travelAccordionsLogicGate = () => {
    this.setState({rendertravelAccordions: true});
    console.log("travelAccordionsLogicGate was called")

  } 



    render() {

        let summaryAccordionPlaceHolder = null
        let servicesAccordionPlaceHolder = null
        let ratesAccordionPlaceHolder = null
        let travelAccordionPlaceHolder = null

        this.state.rendersummaryAccordions && this.state.rendertravelAccordions === false   ? summaryAccordionPlaceHolder = <SummaryAccordions/> : summaryAccordionPlaceHolder = null;
        this.state.renderservicesAccordions ? servicesAccordionPlaceHolder = <ServicesAccordions/> : servicesAccordionPlaceHolder = null;
        this.state.renderratesAccordions  ? ratesAccordionPlaceHolder = <RatesAccordions/> : ratesAccordionPlaceHolder = null;
        this.state.rendertravelAccordions  ? travelAccordionPlaceHolder = <TravelAccordions/> : travelAccordionPlaceHolder = null;

        return (
            <div>
                <center>
                    <table cellspacing="30px">
                        <tr>
                            <td>
                            <Button label="ITEM" icon="pi pi-home"  className="TabMenuButtons" onClick={this.summaryAccordionsLogicGate}   style={{marginRight:'.25em', borderRadius: '8%',  backgroundColor: "#1c479c" }}></Button>
                            </td>
                            <td>
                            <Button label="ITEM" icon="pi pi-users"  className="TabMenuButtons" onClick={this.servicesAccordionsLogicGate}    style={{marginRight:'.25em', borderRadius: '8%',  backgroundColor: "#1c479c"}}></Button>
                            </td>
                            <td>
                            <Button label="ITEM" icon="pi pi-cloud"  className="TabMenuButtons" onClick={this.travelAccordionsLogicGate}  style={{marginRight:'.25em', borderRadius: '8%',  backgroundColor: "#1c479c"}}></Button>
                            </td>
                            <td>
                            <Button label="ITEM" icon="pi pi-money-bill" className="TabMenuButtons" onClick={this.ratesAccordionsLogicGate}   style={{marginRight:'.25em', borderRadius: '8%', backgroundColor: "#1c479c"}}></Button>
                            </td>
                        </tr>
                    </table>
                </center>
                 <tr>

                    {/* EDIT THIS to become dynamic */}
                    <td className="StaticTextBelowTabView"><h1>  ITEM: <em>$67,000.00 </em></h1> </td>
                    <td className="StaticTextBelowTabView"><h1> ITEM: <em>$5,000.00</em>  </h1></td>
                    <td className="StaticTextBelowTabView"><h1> ITEM: <em>$54,406.00</em> </h1></td>
                    <td className="StaticTextBelowTabView"><h1>  ITEM: <em>1,000</em> </h1></td>
                    <td className="StaticTextBelowTabView"><h1> ITEM: <em>20.00%</em></h1></td>
                </tr>
                {ratesAccordionPlaceHolder}
                {servicesAccordionPlaceHolder}
                {travelAccordionPlaceHolder}
                {summaryAccordionPlaceHolder}
            </div>
        );
    }

}

类选项卡按钮扩展组件{
建造师（道具）{
超级（道具）；
此.state={
RenderSummary手风琴：false，
RenderService记录：false，
RenderTravelaccordins:false，
渲染效果：错误，
};
}
设summaryCounter=0；
summaryAccordionsLogicGate=（）=>{
this.setState（{rendersummaryAccordions:true}）；
log（“调用了SummaryAccordionLogicGate”）
总和计数器=总和计数器+1；
} 
服务协调逻辑门=（）=>{
this.setState（{renderservicesaccordins:true}）；
log（“调用了ServicesAccordionLogicGate”）
} 
速率协调逻辑门=（）=>{
this.setState（{renderRateAccordions:true}）；
log（“调用RatesAccordionLogicGate”）
} 
TravelAccordionLogicGate=（）=>{
this.setState（{rendertravelaccordins:true}）；
log（“调用TravelAccordionLogicGate”）
} 
render（）{
让summaryAccordionPlaceHolder=null
让servicesAccordionPlaceHolder=null
让ratesAccordionPlaceHolder=null
让travelAccordionPlaceHolder=null
this.state.rendersummaryAccordions&&this.state.rendertravelAccordions===false？summaryAccordionPlaceHolder=：summaryAccordionPlaceHolder=null；
this.state.renderservicesAccordions？servicesAccordionPlaceHolder=：servicesAccordionPlaceHolder=null；
this.state.renderRateAccordions？ratesAccordionPlaceHolder=：ratesAccordionPlaceHolder=null；
this.state.renderTravelaccordins？travelAccordionPlaceHolder=：travelAccordionPlaceHolder=null；
返回(
{/*将其编辑为动态*/}
项目：$67000.00
项目：5000.00美元
项目：54406.00美元
项目：1000
项目：20.00%
{ratesAccordionPlaceHolder}
{servicesAccordionPlaceHolder}
{travelAccordionPlaceHolder}
{summaryAccordionPlaceHolder}
);
}
}

在构造函数中，您可以这样做：

constructor(props) {
  super(props);
  this.state = {
      rendersummaryAccordions: false,
      renderservicesAccordions: false,
      rendertravelAccordions: false, 
      renderratesAccordions: false, 
  };
  this.summaryCounter = 0;
}

同时确保更新引用它的方式，以包含此

：

summaryAccordionsLogicGate = () => {
  this.setState({rendersummaryAccordions: true});
  console.log("summaryAccordionsLogicGate was called")
  this.summaryCounter = summaryCounter + 1;
}

因为您显然是在使用babel插件来创建类属性，所以另一种方法不是显式地将其放入构造函数中，而是将其作为类属性来创建：

summaryCounter = 0;
summaryAccordionsLogicGate = () => {
  this.setState({rendersummaryAccordions: true});
  console.log("summaryAccordionsLogicGate was called")
  this.summaryCounter = summaryCounter + 1;
}

在构造函数中，您可以这样做：

constructor(props) {
  super(props);
  this.state = {
      rendersummaryAccordions: false,
      renderservicesAccordions: false,
      rendertravelAccordions: false, 
      renderratesAccordions: false, 
  };
  this.summaryCounter = 0;
}

同时确保更新引用它的方式，以包含此
：

summaryAccordionsLogicGate = () => {
  this.setState({rendersummaryAccordions: true});
  console.log("summaryAccordionsLogicGate was called")
  this.summaryCounter = summaryCounter + 1;
}

因为您显然是在使用babel插件来创建类属性，所以另一种方法不是显式地将其放入构造函数中，而是将其作为类属性来创建：

summaryCounter = 0;
summaryAccordionsLogicGate = () => {
  this.setState({rendersummaryAccordions: true});
  console.log("summaryAccordionsLogicGate was called")
  this.summaryCounter = summaryCounter + 1;
}

嗯，我认为你也应该把
summaryCounter
放在状态中，但是，如果你真的想使用某种“全局变量”，你可以这样在类的构造函数中声明它
this.variable=0
嗯，我认为你也应该把
summaryCounter
放在状态中，但是，如果你真的想使用某种“全局变量”，你可以这样在类的构造函数中声明它
this.variable=0
它是一个类属性，你不需要
let
关键字它是一个类属性，你不需要
let
关键字OK这很有意义。我使用这个计数器作为条件来渲染另一个组件。我想说，如果这个数字是渲染的（在这里插入组件），你认为我应该把它变成一个状态布尔值吗？如果你打算用它来决定渲染什么，我绝对建议你把它放到状态。是的，布尔值是有意义的，如果它只是来回切换。好的，这是有意义的。我使用这个计数器作为条件来渲染另一个组件。我想说，如果这个数字是渲染的（在这里插入组件），你认为我应该把它变成一个状态布尔值吗？如果你打算用它来决定渲染什么，我绝对建议你把它放到状态。是的，如果布尔值只是来回切换，它是有意义的。谢谢你的输入，我要看看一个状态在这种情况下是否更好。谢谢你的输入，我要看看一个状态在这种情况下是否更好