Question

我的问题有点令人困惑，你不必阅读整个代码 只需查看function showOrder()
即可

我在showOrder尝试做的只是这样，当人们点击编辑按钮时，它应该显示表单，这很好，但是只要点击编辑按钮，它没有向我显示该项目，请在下面阅读我想说的内容，

喜欢说我有两个项目，这是我的第一次出局

Cook Dinner
Eat Dinner

所以现在让我说点击烹饪晚餐4项，所以我的外观看起来像这样

Cook Dinner
4 Cook Dinner [Edit Button]
Eat Dinner

直到现在一切都很好，但现在我想要发生的是，当我点击编辑按钮时，它应该保持原样4 Cook Dinner，并且它下面应该显示我的表格，留下笔记，基本上我希望我的输出像这样

Cook Dinner
4 Cook Dinner [Edit Button] //Please read the notes below as well
//Display the form, to leave the notes, 
Eat Dinner

以上输出的注释：它显示表格，但删除了4个烹饪晚餐线

我有点困惑，因为为了实现它，我正在使用showOrder()函数和两个if语句，

First if statement基本上说如果orderEditing为true则显示表单

and Second if statement基本上是说如果数量大于零，则显示数量和任务

但是显示它们两者，这两个像if和else语句一样工作，可以解释一下为什么？，

唯一合乎逻辑的解释是，一个函数只能有一个语句，但仍然不清楚任何混淆请告诉我。

import React from 'react'
const order = [];



export default class Header extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            quantity:0,
            editing:false,
            orderEditing:false,
            order
        }
    }

    displayMenu ()
    {
        return (
        <div>
        <div style={{cursor:'pointer'}} onClick={this.handleMenu.bind(this)}>
        {this.props.task}

        </div>
        <button onClick={this.onEdit.bind(this)}>Edit</button>
        </div>
        );
    }
    onEdit()
    {
        this.setState({editing:true})
    }

    handleMenu()
    {
        this.setState({quantity:this.state.quantity+1});

    }

    showOrder()
    {

        if(this.state.orderEditing==true )//***First if statement
        {
            console.log(this.state.orderEditing) /* OutPut -- False*/
            console.log(this.state.quantity)    /* OutPut -- 4*/
            return (
            <form>
            <input type='text' defaultValue={this.state.quantity} size='1'/>
            <input type='text' placeholder='Notes'/>
            </form>
            );
        }//closing of first if statement


        if(this.state.quantity>0)//*** Second if statement
        {
            console.log(this.state.orderEditing)    /* OutPut -- true*/
            console.log(this.state.quantity)        /* OutPut -- 4*/
            return (
            <div>


            {this.state.quantity } {this.props.task}
            <button onClick={this.editOrder.bind(this)}>Edit</button>

            </div>
            );
        }
    }//closing of second if statement.

editOrder()
{
    this.setState({orderEditing:true})
}




    render(){

        return (
        <div>
        {this.displayMenu()}
            {this.showOrder()}
        </div>
        );
    }
}

Answer 1

当您在函数内返回时，返回块之后的代码将不会执行。这就是为什么如果第一个条件为真，则第二个条件不会呈现。如果你想单独显示它们，你总是可以将它们分成两个独立的函数，这些函数有自己的返回值。

Answer 2

在React中，组件可以表示为常规JavaScript函数和函数，它们的行为方式完全相同。只要满足任何条件，showOrder函数就会返回其中一个分支的结果，并且不会执行任何其他代码。通过测试的第一个条件就是全部。您的示例可以简化为：

function f() {
    if (condition1) return a;
    if (condition2) return b;
}

为了渲染（返回）多个结果，必须用一些容器元素包装结果，很可能是div。然后，您可以使用conditionally render logical AND (&&) operator组件。 React不会呈现一些falsy values（null，false，undefined）。

固定showOrder功能可能如下所示：

showOrder() {
    return (
        <div>
            {this.state.orderEditing && <form>Render form here</form>}
            {this.state.quantity > 0 && <div>Render edit button here</div>}
        </div>
    );
}

为什么两个if语句像if和else语句一样工作

2 个答案: