Question

我想做这样的事情：

if{errors?
 {errors.email ? (
            <ErrorInput
             ...
            />
          ) : (
            <Input
        ...
            />
          )}:
(
            <Input
            ...
            />
          )}

如果某事（如果某事做了...或...）或...

{(() => {
            if (errors) {
              if (errors.email) {
                <ErrorInput
                 ...
                />;
              } else {
                <Input
              ...
                />;
              }
            } else {
              <Input
               ...
              />;
            }
          })()}

我尝试过但被期望进行赋值或函数调用，而是看到了一个表达式我正在使用反应和我是新来的

Answer 1

您应该签出Conditional Rendering at React docs。

React中的条件渲染的工作方式与JavaScript中条件工作的方式相同。使用if或conditional运算符之类的JavaScript运算符来创建表示当前状态的元素，然后让React更新UI来匹配它们。

最终将看起来像这样：

const App = () => {
  return <>{errors?.email ? <ErrorInput /> : <Input />}</>;
};

Answer 2

尝试这样

return (
 <>
   {errors ?
              errors?.email ?
                (<ErrorInput
                 ...
                />)
              :
                (<Input
              ...
                />)
           :
              (<Input
               ...
              />)
            </>
)

条件渲染嵌套ifs反应

2 个答案: