タグの後にタブの内容を持ってHTML構造を維持することは可能ですか

Question

私は完全に反応するタブのコードを反応させましたが、私は下のものと一致するようにHTML構造を変更する必要があります。 <a>タグの後にタブのコンテンツを表示して、HTML構造を維持することは可能ですか？あなたのタイトルから

https://jsfiddle.net/9e767txs/9/

<div className="sports-tab-container"> 
    <ul> 
    <li role="presentation" className="sports-setup-ico first-time-active ft-active-tab"> 
     <a href="javascript:;" className="sports-tab-header"> 
     <h2>sports player</h2> 
     <p className="sports-subtitle">Days 1 and 2</p> 
     </a> 
     <div className="sports-tab-content"> 
     <p className="sports-large-text ft-day1 ft-day2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry</p> 
     </div> 
    </li> 
    <li role="presentation" className="sports-invest-ico"> 
     <a href="javascript:;" className="sports-tab-header"> 
     <h2>car selling</h2> 
     <p className="sports-subtitle">Approx. Day 3</p> 
     </a> 
     <div className="sports-tab-content"> 
     <p className="sports-large-text ft-day1 ft-day2">It is a long established fact that a reader will be distracted by the readable content of a page when </p> 
     </div> 
    </li> 
    </ul> 
</div> 

Answer 1

、これは私が反応コードを構造化する方法をです。私はすべてのスタイリング情報を省いています。あなたがデータのリストを取得すると仮定します。

import React from 'react' 
import ReactDOM from 'react-dom' 

const data = [ 
    { heading: 'sports player', 
    subtitle: 'Days 1 and 2', 
    content: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry' 
    }, 
    { heading: 'car selling', 
    subtitle: 'Approx. Day 3<', 
    content: 'It is a long established fact that a reader will be distracted by the readable content of a page when'} 
] 

const Heading = ({heading, subtitle}) => { 
    return(
    <a> 
     <h2>{heading}</h2> 
     <p>{subtitle}</p> 
    </a> 
    ) 
} 

const Content = ({content}) => { 
    return(
    <div> 
     <p>{content}</p> 
    </div> 
    ) 
} 
const Sports = ({data}) => { 
    return (
    <ul> 
     { data.map(element => { 
     return(
      <li> 
      <Heading heading={element.heading} subtitle={element.subtitle}/> 
      <Content content={element.content} /> 
      </li> 
     ) 
     })} 
    </ul> 
    ) 
} 

ReactDOM.render(<Sports data={data} />, document.getElementById('main')) 

See on CodePen