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

像这样写：

{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在{}内的功能，它将起作用。

Answer 2

您应该可以添加包裹地图的子{。您还有一些其他错误。你过早地制作你的标签和大括号。另外，“空”JSX元素应该返回null，而不是空字符串。您的语法也已断开，此处没有结束>：<buttontwo</button>

使用代码编辑器提供语法突出显示，并使用一致的间距，并始终使用eslint来检查错误，这将有助于防止需要使用StackOverflow并阻止您对语法问题进行编程。

{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 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的条件呈现部分。

If-Else的ReactJS JSX语法

3 个答案: