ReactJs：如何设置一个简单的条件可见隐藏规则？

我有一个组件集合，带有“添加和删除”按钮

当集合太小或太大时，我想隐藏/灰显这些按钮

从中提取的这段代码似乎可以完成这项工作 :

现在我认为上面的内容可能是垃圾。欢迎所有建议。我认为这个变量应该全局标记，但我不知道怎么做

基本上，我只想有一个变量，当删除行应该隐藏（只剩下一行）时设置为false，当有两行或更多行时设置为true

当集合达到15或更多时，处理另一个变量traking也是一样的

现在，即使我声明isGreaterThanOne作为一个全局常量等于true，div也不会出现

根据@Denialos的要求，以下是我的全部内容（包括他的建议）：

/*************************************************/
/********进口***********/
/* ************************************* */
从“React”导入React，{Component}；
从“节点UUID”导入UUID；
从“reactstrap”导入{Card，CardBlock，Button，InputGroup，Input}；
从“../ProviderInfo/ProviderInfo”导入ProviderInfo；
/* ************************************* */
/********变量***********/
/* ************************************* */
/* ************************************* */
/********组件********/
/* ************************************* */
导出默认类PretzelStandComponent扩展组件{
建造师（道具）{
超级（道具）；
this.state={
输入pretzel:[]，
比一更伟大：是的
};
this.incrementPretzel=this.incrementPretzel.bind（this）；
this.decrementPretzel=this.decrementPretzel.bind（this）；
}
componentDidMount（）{
这个.incrementPretzel（）；
}
增量椒盐卷饼（）{
const uuid=require（'uuid/v1'）；
uuid（）；
const inputPretzel=this.state.inputPretzel；
if（this.state.inputPretzel.length>1）{
this.state.isGreaterThanOne=true；
}否则{
this.state.isGreaterThanOne=false；
}
这是我的国家({
inputPretzel:inputPretzel.concat(
),
});
}
递减的{
if（this.state.inputPretzel.length>1）{
this.state.isGreaterThanOne=true；
}否则{
this.state.isGreaterThanOne=false；
}
这是我的国家({
inputPretzel:this.state.inputPretzel.splice（this.state.inputPretzel，this.state.inputPretzel.length-1），
});
}
render（）{
返回(
椒盐脆饼
{this.state.inputPretzel}
阿琼椒盐卷饼
{this.props.is大于one&&(
恩利文椒盐卷饼
) }
选项{'}
特务
);
}
}

不要直接改变状态，应该调用setState。

永远不要直接改变this.state，因为之后调用setState（）可能会 替换你所做的变异。把这个国家当作 不变的

setState（）不会立即改变this.state，但会创建 等待状态转换。调用此命令后访问this.state 方法可能返回现有值

无法保证对setState调用的同步操作 为了提高性能，可以对调用进行批处理。setState（）将 除非使用条件渲染逻辑，否则始终触发重新渲染 在shouldComponentUpdate（）中实现

如果正在使用可变对象，并且逻辑无法实现 在shouldComponentUpdate（）中，仅当新状态 与前一状态不同将避免不必要的重新渲染

字体：

使用immutability helper可以解决您的问题：

从“不变性助手”导入更新；
.....
.....
增量椒盐卷饼（）{
const uuid=require（'uuid/v1'）；
uuid（）；
const inputPretzel=this.state.inputPretzel；
if（this.state.inputPretzel.length>1）{
this.setState（{isGreaterThanOne:true}）；
否则{
this.setState（{isGreaterThanOne:false}）；
}
这是我的国家({
inputPretzel:inputPretzel.concat(
),
});
}
递减的{
const inputPretzel=this.state.inputPretzel；
if（this.state.inputPretzel.length>1）{
this.setState（{isGreaterThanOne:true}）；
}否则{
this.setState（{isGreaterThanOne:false}）；
}
this.setState（（prevState）=>({
数据：更新（prevState.data，{$splice:[-1，1]]}）
})
}
render（）{
返回(
椒盐脆饼
this.incrementPretzel}>ajourn Pretzel
{this.state.isGreaterThanOne&&
这个.decrementPretzel}>Enlever是椒盐卷饼
}
选择权
特务
);
}

这里的问题是您试图在组件中修改道具。如前所述，千万不要以这种方式修改您的状态或道具

以下是您的问题的可能解决方案：

render() {
const { inputPretzel } = this.state;
const isGreaterThanOne  = inputPretzel && inputPretzel.length > 0;
return (
    <Card>
        <CardBlock className="main-table">
            <fieldset>
                <legend>Pretzels</legend>
                {inputPretzel}
                <button onClick={this.incrementPretzel}>Ajouter un Pretzel</button>
                {isGreaterThanOne  && (
                    <div>
                        <button onClick={this.decrementPretzel}>Enlever un Pretzel</button>
                    </div>
                ) }
            </fieldset>
            <Button color="secondary">Options</Button>{' '}
            <Button id="btn">Exécuter</Button>
        </CardBlock>
    </Card>
);

render（）{
const{inputPretzel}=this.state；
const大于one=inputPretzel&&inputPretzel.length>0；
返回(
普雷茨
let isGreaterThanOne = true;
this.setState({
    collection: this.state.collection.splice(this.state.collection, this.state.collection.length - 1),
});
if (this.state.collection.length > 1) {
    isGreaterThanOne = true;
} else {
    isGreaterThanOne = false;
}

    return { isGreaterThanOne };

/* ************************************* */
/* ********       IMPORTS       ******** */
/* ************************************* */
import React, { Component } from 'react';
import UUID from 'node-uuid';
import { Card, CardBlock, Button, InputGroup, Input } from 'reactstrap';
import ProviderInfos from '../ProviderInfos/ProviderInfos';

/* ************************************* */
/* ********      VARIABLES      ******** */
/* ************************************* */

/* ************************************* */
/* ********      COMPONENT      ******** */
/* ************************************* */
export default class PretzelStandComponent extends Component {

    constructor(props) {
        super(props);
        this.state = { 
            inputPretzel: [],
            isGreaterThanOne: true
            };
        this.incrementPretzel = this.incrementPretzel.bind(this);
        this.decrementPretzel = this.decrementPretzel.bind(this);
    }

    componentDidMount() {
        this.incrementPretzel();
    }

    incrementPretzel() {
        const uuid = require('uuid/v1');
        uuid();
        const inputPretzel = this.state.inputPretzel;
        if (this.state.inputPretzel.length > 1) {
            this.state.isGreaterThanOne = true;
        } else {
            this.state.isGreaterThanOne = false;
        }
        this.setState({
            inputPretzel: inputPretzel.concat(<InputGroup>
                <Input placeholder="Pretzel" key={uuid} /><ProviderInfos /></InputGroup>),
        });
    }

    decrementPretzel() {
        if (this.state.inputPretzel.length > 1) {
            this.state.isGreaterThanOne = true;
        } else {
            this.state.isGreaterThanOne = false;
        }
        this.setState({
            inputPretzel: this.state.inputPretzel.splice(this.state.inputPretzel, this.state.inputPretzel.length - 1),
        });
    }

    render() {
        return (
            <Card>
                <CardBlock className="main-table">
                    <fieldset>
                        <legend>Pretzels</legend>
                        {this.state.inputPretzel}
                        <button onClick={this.incrementPretzel}>Ajouter un Pretzel</button>
                        { this.props.isGreaterThanOne && (
                           <div>
                               <button onClick={this.decrementPretzel}>Enlever un Pretzel</button>
                           </div>
                         ) }
                    </fieldset>
                    <Button color="secondary">Options</Button>{' '}
                    <Button id="btn">Exécuter</Button>
                </CardBlock>
            </Card>
        );
    }
}

import update from 'immutability-helper';
.....
.....
    incrementPretzel() {
        const uuid = require('uuid/v1');
        uuid();
        const inputPretzel = this.state.inputPretzel;
        if (this.state.inputPretzel.length > 1) {
            this.setState({ isGreaterThanOne: true });
         else {
            this.setState({ isGreaterThanOne: false });
        }
        this.setState({
            inputPretzel: inputPretzel.concat(<InputGroup>
                <Input placeholder="Pretzel" key={uuid} /><ProviderInfos /></InputGroup>),
        });
    }
decrementPretzel() {
    const inputPretzel = this.state.inputPretzel;
    if (this.state.inputPretzel.length > 1) {
       this.setState({ isGreaterThanOne: true });
    } else {
        this.setState({ isGreaterThanOne: false });
    }
  this.setState((prevState) => ({
    data: update(prevState.data, {$splice: [[-1, 1]]})
  })
}

render() {
        return (
            <Card>
                <CardBlock className="main-table">
                    <fieldset>
                        <legend>Pretzels</legend>
                        <button onClick={() => this.incrementPretzel}>Ajouter un Pretzel</button>
                        { this.state.isGreaterThanOne && 
                           <div>
                               <button onClick={() => this.decrementPretzel}>Enlever un Pretzel</button>
                           </div>
                         }
                    </fieldset>
                    <Button color="secondary">Options</Button>
                    <Button id="btn">Exécuter</Button>
                </CardBlock>
            </Card>
        );
    }

render() {
const { inputPretzel } = this.state;
const isGreaterThanOne  = inputPretzel && inputPretzel.length > 0;
return (
    <Card>
        <CardBlock className="main-table">
            <fieldset>
                <legend>Pretzels</legend>
                {inputPretzel}
                <button onClick={this.incrementPretzel}>Ajouter un Pretzel</button>
                {isGreaterThanOne  && (
                    <div>
                        <button onClick={this.decrementPretzel}>Enlever un Pretzel</button>
                    </div>
                ) }
            </fieldset>
            <Button color="secondary">Options</Button>{' '}
            <Button id="btn">Exécuter</Button>
        </CardBlock>
    </Card>
);