如果条件为真，则添加多个JSX / HTML元素

Question

我正在使用天气API。就我而言，如果温度低于10度，我想添加一些HTML元素。 <i class="rain"></i> i标签必须被打印150次

              Here is my condition:
              render() {
                 return (
                    {items.current.temp_c <10 ? "Print 150 <i></i>" : ""}
                 )
              }

Answer 1

              render() {
                 return (
                    {items.current.temp_c < 10 && Array.from({length: 150}, (e, i) => i + 1).map((item) => <i key={item}></i>)};
                 )
              }

尝试制作一个包含150个元素的数组，然后将其映射

Answer 2

您需要使用className而不是class。另外，i应该没有孩子，应该是一个自动关闭的标签。

render() {
  return (
    items.current.temp_c < 10 
      ? Array.from(Array(150), () => (<i className={'rain'} />));
      : null;
  );
}

Answer 3

render() {
  return (
     current < 10 ? [...new Array(150).keys()].map(i => <i key={i} className="rain"></i>) : <p>NADA</p>
  )
}