Я пытаюсь сделать некоторые стили с помощью реакции. У меня есть страница результатов, и я хочу, чтобы мои карты результатов растягивались (немного), чтобы заполнить каждую строку. Для этого я использую ...
let body = {
display: "flex",
margin: "0% 10%",
flexWrap: "wrap",
};
и ...
let card = {
fontSize: "90%",
flexBasis: "15rem",
minWidth: "10rem",
flexShrink: "1",
flexGrow: "1",
}
Моя проблема в том, что я также хочу, чтобы все карточки результатов были одинакового размера. Обычно я бы подумал об использовании jQuery для этого, но я использую React, и это немного неловко.
Итак, я пытаюсь передать информацию о ширине первых результатов карточка (дочерний компонент) возвращается на страницу результатов (родительский компонент) с функцией обратного вызова. Затем я собираюсь передать свойство "maxWidth" другим карточкам результатов, используя реквизит. Примечание: это работает, в том смысле, что я могу передать информацию о ширине родителю и стилизовать карточку результатов, используя реквизиты.
Проблема заключается в том, что когда я пытаюсь назначить информацию о ширине реквизитам одна из других карточек результатов, она не определена. Я подозреваю, что это потому, что вы не можете обновлять состояние и получать информацию из состояния во время рендеринга элемента JSX ...
Есть идеи о том, как я могу достичь того, чего хочу? Любые идеи о том, как я могу как-то приостановить рендеринг для обновления состояния?
Все лучшее
Родительский компонент
import React from 'react';
import ReactDOM from 'react-dom';
import Card from './Card.js';
class Body extends React.Component {
constructor(props){
super(props);
this.state = {
};
this.cardWidth = function (width) {
this.state.cardWidth = width;
console.log(this.state.cardWidth);
}.bind(this);
};
render() {
return (
<div className="body" style={body}>
<Card cardWidth={this.cardWidth}/>
<Card style={{maxWidth:`${this.state.cardWidth}`}}/>
<Card style={{maxWidth:`${this.state.cardWidth}`}}/>
</div>
);
};
};
let body = {
display: "flex",
margin: "0% 10%",
flexWrap: "wrap",
};
export default Body;
Дочерний компонент
import React from 'react';
import ReactDOM from 'react-dom';
class Card extends React.Component {
constructor(props){
super(props);
this.state = {
};
this.cardref = React.createRef();
};
componentDidMount() {
if (this.props.cardWidth) {
this.props.cardWidth(this.cardref.current.offsetWidth);
};
};
render() {
return (
<div className="card" style={(this.props.style)?(Object.assign({}, this.props.style, card)): card} ref={this.cardref}>
<div className="card-body">
<h5 className="card-title" style={{fontSize: "100%"}}>Card title</h5>
<p className="card-text" style={pText}>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" className="btn btn-primary" style={{fontSize: "80%"}}>Go somewhere</a>
</div>
</div>
);
};
};
let card = {
fontSize: "90%",
flexBasis: "15rem",
minWidth: "10rem",
// maxWidth: "15rem",
flexShrink: "1",
flexGrow: "1",
}
let pText = {
display: "block",
textOverflow: "ellipsis",
overflow: "hidden",
height: "4rem",
fontSize: "80%"
};
export default Card;