#reactjs
#reactjs
Вопрос:
Пока это мой код
class PortfolioList extends Component{
render(){
const {column , styevariation } = this.props;
const list = PortfolioListContent.slice(0 , this.props.item);
return(
<React.Fragment>
{list.map((value , index) => (
<div className={`${column}`} key={index}>
<div className={`portfolio ${styevariation}`}>
<div className="thumbnail-inner">
<div className={`thumbnail ${value.image}`}></div>
<div className={`bg-blr-image ${value.image}`}></div>
</div>
<div className="content" >
<div className="inner">
<h3>{value.category}</h3>
<p><a href="/portfolio-details">{value.title}</a></p>
<div className="portfolio-button">
<a className="rn-btn" href="/portfolio-details">Live</a>
</div>
<div className="portfolio-button">
<a className="rn-btn" href="/portfolio-details">GitHub</a>
</div>
</div>
</div>
</div>
</div>
))}
</React.Fragment>
)
}
}
Это отображение раздела моего портфолио на моем веб-сайте. Я хочу отображать название каждого приложения и детали только при наведении курсора.
Также как я могу заставить мои кнопки располагаться рядом друг с другом? вместо того, чтобы занимать новую строку? Спасибо
Комментарии:
1. Можете ли вы предоставить ссылку codesandbox, чтобы я мог правильно рассказать вам, что вам нужно изменить?
Ответ №1:
Вы можете использовать события OnMouseEnter и onMouseLeave для обработки наведения курсора. Привяжите функцию к этому событию в title и сохраните локальное логическое состояние shouldShowDetails со значением по умолчанию false . При вызове функции измените это логическое значение на true и условно отобразите детали.
Для второй части сделайте ваши кнопки контейнером flex и установите flex-wrap для wrap .
Комментарии:
1. В этом случае я хочу, чтобы дочерние элементы div className «inner» были скрыты до тех пор, пока не активируется наведение курсора мыши. привязываю ли я div с именем класса inner к функции?
2. ДА. Вам нужно связать функцию с элементом внутреннего класса. оберните дочерние элементы так, чтобы вы могли условно отображать их все, используя это логическое состояние.
3. можете ли вы показать мне пример того, как показывать детали при наведении курсора?
4. Извините за поздний ответ. Вот ссылка на codesandbox. Вы можете получить представление об этом. Я немного отредактировал ответ. Пожалуйста, посмотрите codesandbox.io/s/stoic-field-vvvcm?file=/src/App.js
5. Просто используйте state вместо useState() . Остальное будет таким же. Если вы спрашиваете меня о синтаксисе, вы можете найти синтаксис компонента класса в документации react