If-Else 的 ReactJS JSX 语法

Question

我有以下 jsx 代码，我试图从映射函数中取出一些代码，但 jsx 语法出错，我希望只有在有一些数据时才显示此块..

{this.props.someData ? 
  <div className="container">
    <h3>Heading</h3>
    <div className="block1">
      <button>one</button>
      <buttontwo</button>
    </div>  
    this.props.someData.map((response, index) => {
      return ( 
        <div className="Block2">  
          <div key={index}>
            <span>{response.number}</span>
          </div>
        </div>  
      </div> 
    );
}) : ''}

Answer 1

您应该可以添加一个子 { 包裹您的地图。您还有其他一些错误。你过早地对你的标签和大括号进行了 cosing。此外，"empty" JSX 元素应该 return null，而不是空字符串。您还破坏了语法，这里没有关闭 >：<buttontwo</button>

使用提供语法高亮显示的代码编辑器，并使用一致的间距，并始终使用 eslint 检查错误，将有助于避免需要使用 Whosebug 并阻止您在语法问题上进行编程。

{this.props.someData ?
    <div className="container">
        <h3>Heading</h3>
        <div className="block1">
            <button>one</button>
            <button>two</button>
        </div>
        { this.props.someData.map((response, index) => {
            return (
                <div className="Block2">
                    <div key={index}>
                        <span>{response.number}</span>
                    </div>
                </div>
            );
        }) }
    </div> : null}

Answer 2

如果我没看错你的意思，我想这样就可以了：

 {this.props.someData &&  
  (<div className="container">
    <h3>Heading</h3>
    <div className="block1">
      <button>one</button>
      <buttontwo</button>
    </div>  
    {this.props.someData.map((response, index) => {
      return ( 
        <div className="Block2">  
          <div key={index}>
            <span>{response.number}</span>
          </div>
        </div> 
      );
    })}
  </div>) 
}

我建议您查看 documentation 的条件渲染部分。

Answer 3

这样写：

{this.props.someData ? 
     <div className="container">
          <h3>Heading</h3>
          <div className="block1">
              <button>one</button>
              <buttontwo</button>
          </div>  
          {this.props.someData.map((response, index) => {
              return ( 
                 <div className="Block2">  
                    <div key={index}>
                     <span>{response.number}</span>
                    </div>
                 </div>
              )})
           }
     </div> 
: <div/>}

你正在做的错误：

要在 html 元素内渲染任何 js 代码，需要 {}，因为如果条件为真，则渲染 JSX 并且在其中使用 map，所以将 map 函数放在 {} 中，它将起作用。

If-Else 的 ReactJS JSX 语法

ReactJS JSX Syntax for If-Else

jsx

reactjs