0
私はリアクションアプリケーションをスタイリングするためにブートストラップを使用しています。これは大部分の時間の大部分を占めています。しかし何らかの理由で私はカードコンポーネントを正しくレンダリングできません。 Navbarやフォームのような他のブートストラップコンポーネントはうまく動作します。誤った動作をしているカードコンポーネントだけです。ブートストラップカードのコンポーネントがリアクションでレンダリングされない
クラスの名前をclassNameに変更する以外に、カードのレンダリングには何か必要ですか?下のコードを完了してください。どんな洞察力も大いにありがとう!
import React from 'react'
import ReactDOM from 'react-dom';
import TrackerReact from 'meteor/ultimatejs:tracker-react';
export default class CardCollectionWrapper extends TrackerReact(React.Component) {
constructor() {
super();
this.state = {
}
}
componentWillMount() {
}
componentWillUnmount() {
}
loadMore() {
}
sortBy(){
}
render() {
return(
<div className="card-deck-wrapper">
<div className ="container">
<div className="card-deck">
<div className="card">
<img className="card-img-top" src="/images/wire240.jpeg" alt="Card image cap"/>
<div className="card-block">
<h4 className="card-title">Card title</h4>
<p className="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p className="card-text"><small className="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div className="card">
<img className="card-img-top" src="/images/wireframe.png" alt="Card image cap"/>
<div className="card-block">
<h4 className="card-title">Card title</h4>
<p className="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p className="card-text"><small className="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div className="card">
<img className="card-img-top" src="/images/wireframe.png" alt="Card image cap"/>
<div className="card-block">
<h4 className="card-title">Card title</h4>
<p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p className="card-text"><small className="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>
)}}
ブートストラップ3または4をロードしましたか?カードはブートストラップ4でのみ利用可能です。 –
それを釘付けにしました!私はブートストラップのような雰囲気のパッケージを使用しています。ありがとう – ElJefeJames