用条件渲染问题反应简单的输入字段

Question

我正在阅读 Dave Ceddia 的《Pure React》一书，下面是我遇到的一个问题，我感谢任何尽可能简单的解决方案，谢谢。

问题：从该组件返回适当的 JSX，以便当用户名未定义或 null 时，它呈现“未登录”。 当用户名是一个字符串时，呈现“你好，用户名

我的答案：

import React from 'react';
import ReactDOM, { render } from 'react-dom';

function Greeting(){
  render(){
   let username = '';
   let greeting = '';

   if(typeof username == String){
    greeting = <span>Hello {username}</span>
   }else{
    greeting = <span>Not logged in</span>;
   }

   return (
    <div>
     <input type="text" value={username}/>
     {greeting}
    </div>
   )
  }
 }

ReactDOM.render(
  <Greeting/>,
  document.getElementById('root')
);

Answer 1

您将class 组件语法与功能组件语法混合在一起。

下面我使用React Hooks重写您的代码以更正功能组件。 另外，我使用内联 If-Else 条件渲染greeting元素。

 const { useState } = React; function Greeting(){ const [username, setUsername] = useState(""); let greeting = username? <span>Hello {username}</span>: <span>Not logged in</span>; return ( <div> <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} /> {greeting} </div> ) } ReactDOM.render( <Greeting/>, document.getElementById('root') );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="root"></div>

Answer 2

三件事：

• username是您的组件输入，因此您必须将其作为道具传递。 如果未定义，您可以为其设置默认值。 尽管您可能出于演示/测试目的在上面进行了介绍
• 从您共享的内容来看，您的组件不是 class，这是一个功能组件。 因此，此处不适用render class 方法
• 问题是“当用户名未定义或 null 时，它会呈现“未登录””，您应该按照问题所说的，不要颠倒检查username是否为字符串的逻辑

import React from 'react';
import ReactDOM, { render } from 'react-dom';

function Greeting({ username = '' }) {
   let greeting;
   if (username === undefined || username === null) {
      greeting = (<span>Not logged in</span>);
   } else {
      greeting = (<span>Hello {username}</span>);
   }

   return (
    <div>
     <input type="text" value={username}/>
     {greeting}
    </div>
   )
  }
 }

ReactDOM.render(
  <Greeting username='' />,
  document.getElementById('root')
);

Answer 3

您可以定义 state 例如用户名，并使您的问候消息依赖于它的变化。 我创建了以下沙箱来显示解决方案：

https://codesandbox.io/s/unruffled-browser-iohyt

以下是组件的 JS 代码：

import React from "react";

export default function Greeting() {
  const [ username, setUserName ] = React.useState(null);

  return (
    <div>
      <input
        type="text"
        value={username}
        onChange={evt => setUserName(evt.target.value)}
      />
      <span>{username ? `Hello ${username}`:"Not logged in"}</span>
    </div>
  );
}

Answer 4

    function Header() {
        let username = 'Username_here';
        let isValid;
        function validString(){
            if(typeof username === 'string'){
            return isValid=true;
            }
            else {
                return isValid=false;
            }
        }
        validString();
    
        return (
            <>
            <span>
                {isValid && 'Hello,' +  username}
                {!isValid && 'Not Logged In'}
            </span>
            </>
        );
    }
    
    export default Header;

At first I created a component header then just import this to app.js file.