ReactJS JSX Syntax for If-Else

问题

I have the following jsx code, I am trying to put some code out of the mapping function, but getting errors with the jsx syntax, I want this block displayed only if there is some data..

{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> 
    );
}) : ''}

回答1:

Write it like this:

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

Mistake you are doing:

To render any js code inside html elements, {} is required, since you are rendering JSX if the condition is true and inside that using map so put map function inside {}, it will work.

回答2:

You should be able to add a child { wrapping your map. You have a few other errors as well. You were cosing your tags and braces too early. Additionally, an "empty" JSX element should return null, not empty string. You also have broken syntax with no closing > here: <buttontwo</button>

Using a code editor that provides syntax highlighting, and using consistent spacing, and always using eslint to check for errors, will help prevent the need to come to StackOverflow and blocking your programming on syntax questions.

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

If I get your meaning correctly, I think this would do:

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

I'd recommend you to have a look at the conditional rendering section of the documentation.

来源：https://stackoverflow.com/questions/41089394/reactjs-jsx-syntax-for-if-else

标签

reactjs

jsx