If-Else 的 ReactJS JSX 语法答案

【问题标题】：ReactJS JSX Syntax for If-ElseIf-Else 的 ReactJS JSX 语法
【发布时间】：2016-12-11 18:12:10
【问题描述】：

我有以下 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> 
    );
}) : ''}

【问题讨论】：

如果其中一个答案是正确的，请单击答案旁边的空白复选标记将其标记为正确。否则，请细化问题。

标签： reactjs jsx

【解决方案1】：

这样写：

{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 代码，{} 是必需的，因为如果条件为真并且在内部使用 map 渲染 JSX，因此将 map 函数放入 {} 中，它将工作。

【讨论】：

【解决方案2】：

您应该能够添加一个子 { 包裹您的地图。您还有其他一些错误。你过早地使用标签和牙套。此外，“空”JSX 元素应该返回 null，而不是空字符串。你也有错误的语法，没有关闭 > 这里：<buttontwo</button>

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

{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}

【讨论】：

【解决方案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>) 
}

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

【讨论】：