如果我需要先显示自定义提示，如何使用条件正确渲染 React 组件？

Question

我正在制作需要 2 个值（名称和城市）才能呈现的天气预报应用程序。这就是为什么我想在加载后首先在网站上显示一个弹出窗口。然后，如果用户输入正确的城市 - 主要组件出现在弹出窗口的位置。我想使用像 Sweetalert2 这样的外部库，但它不允许双重输入。

我编写了这个使用提取和条件的组件，但它不起作用。如果 promise 成功解决，它应该更改状态“验证”以触发渲染另一个组件，但是当“this.setState({ validation: true })”存在时，promise 发送“错误消息”而不是“成功”，仅此而已发生

import React from 'react'
import App from './App.js';


class InputBox extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: "",
            cityValue: "",
            errorMessage: "",
            key: 'x',
            validation: false
        }
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        this.setState({ cityValue: event.target.value })
    }
    handleSubmit(event) {


        fetch('https://api.openweathermap.org/data/2.5/weather?q=' + this.state.cityValue + '&appid=' + this.state.key)
        .then(function (resp) {
            return resp.json()
        })    
        .then(function (data) {
                if (data) {
                   
                      //  this.setState({ validation: true }) // if this is present, there is "error message" in console
                        console.log("success")
                    
                }
            })
            .catch(function () {
                console.log("error message")
                
            });


    }

    render() {
        let content
        if (this.state.validation == false) {
            content = <form
                onSubmit={
                    (e) => {
                        e.preventDefault();
                        this.handleSubmit(this.state.cityValue);
                    }
                }
            >


                <input type="text" value={this.state.cityValue} onChange={this.handleChange} />
                <input type="submit" value="Send" />
            </form>
        } else {
            content = <App city={this.state.cityValue} />
        }

        return (
            <div>
                {content}
            </div>

        );
    }

}

export default InputBox

Answer 1

使用条件渲染。

您可以尝试以下任意一种方式在react中实现条件渲染：

使用 if…else 语句
使用 switch 语句
使用元素变量
使用三元运算符
使用逻辑 &&（短路评估）
使用立即调用的函数表达式 (IIFE)
使用增强的 JSX 库

参考 React 文档中的条件渲染：https://reactjs.org/docs/conditional-rendering.html

Answer 2

可以使用三元运算符(?:)实现条件渲染

render() {
    return {this.state.validation == false?(
        <form
            onSubmit={
                (e) => {
                    e.preventDefault();
                    this.handleSubmit(this.state.cityValue);
                }
            }
        >
            <input type="text" value={this.state.cityValue} onChange={this.handleChange} />
            <input type="submit" value="Send" />
        </form>):

        (<App city={this.state.cityValue} />)
}}

如果我需要先显示自定义提示，如何使用条件正确渲染 React 组件？

How do I properly render React components using conditionals if I need to show custom prompt first?

javascript

reactjs

es6-promise