Question

您好我正在尝试有条件地渲染哪个是另一个组件。我选择通过创建if / else语句并使用状态值来实现，因为它在0到1之间变化，具体取决于单击哪个选项卡。这是最好的方法吗？

反正，

我想如果状态值为0，如果它是1我想渲染另一个组件。让我们说出来我很难获得＆＃34;价值＆＃34;国家另外我不确定是否必须在html代码中编写if / else语句或者在render函数之外执行它。目前它设置为始终显示。

以下是代码：

import React from 'react'
import PropTypes from 'prop-types';
import {
    withStyles
} from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import ServiceDescription from './ServiceDescription';

const styles = {
    root: {
        flexGrow: 1,
    },
};

class AddingOffer extends React.Component {
    state = {
        value: 0,
    };



    handleChange = (event, value) => {
        this.setState({
            value
        });
    };
    render() {
        const {
            classes
        } = this.props;

        return ( <
            div >
            <
            Paper className = {
                classes.root
            } >
            <
            Tabs value = {
                this.state.value
            }
            onChange = {
                this.handleChange
            }
            indicatorColor = "primary"
            textColor = "primary"
            centered >
            <
            Tab label = "Service" / >
            <
            Tab label = "NonService" / >
            <
            /Tabs> <
            /Paper> <
            ServiceDescription / >
            <
            /div>
        );
    }
}

AddingOffer.propTypes = {
    classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(AddingOffer);

提前致谢

Answer 1

据我了解你只想做一些条件渲染？由于有多种可能的解决方案，您可以查看它们here。

最简单的方法可能是在render return语句中使用条件渲染。为此，您必须使用Conditional (ternary) Operator：

{statement_to_check ? if_true_do_this : else_do_this}

如果我理解你的要求，这样的事情应该有效：

{value === 0 ? <Tabs value={this.state.value} onChange={this.handleChange} /> : null}
{value === 1 ? <YourOtherComponent /> : null}

反应条件渲染（状态）

1 个答案: