Javascript 反应：如何基于另一个JSX元素更改一个JSX元素的样式属性？

我想用react做一些造型。我有一个结果页面，我希望我的结果卡能延伸（一点）以填满每一行。要做到这一点，我正在使用

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;

从“React”导入React；
从“react dom”导入react dom；
从“/Card.js”导入卡片；
类主体扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
};
this.cardWidth=函数（宽度）{
this.state.cardWidth=宽度；
console.log（this.state.cardWidth）；
}.约束（本）；
};
render（）{
返回(
);
};
};
让主体={
显示：“flex”，
保证金：“0%10%”，
柔性包装：“包装”，
};
导出默认体；

子组件

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;

从“React”导入React；
从“react dom”导入react dom；
类卡扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
};
this.cardref=React.createRef（）；
};
componentDidMount（）{
如果（此.props.cardWidth）{
this.props.cardWidth（this.cardref.current.offsetWidth）；
};
};
render（）{
返回(
卡片标题
一些快速示例文本，用于构建卡片标题并构成卡片内容的大部分
);
};
};
出租卡={
字体大小：“90%”，
flexBasis：“15雷姆”，
最小宽度：“10雷姆”，
//最大宽度：“15雷姆”，
flexShrink：“1”，
flexGrow：“1”，
}
设pText={
显示：“块”，
textOverflow：“省略号”，
溢出：“隐藏”，
高度：“4rem”，
字体大小：“80%”
};
导出默认卡；

要在给定空间内使所有卡的大小相同，可以使用

flex grow

。例如，如果您在所有卡上设置了

flex grow:1

，那么它们都将增长以均匀地填充额外的空间。如果您查找“flex grow”标题，也有一个很好的图表。

结果表明，我遗漏了maxWidth属性值之后的px。现在我有一个问题，我需要它在一个视图端口调整大小事件上重新渲染

---

我尝试使用flex grow，我的问题是，除非每行的卡数相同，否则不同行上的卡的宽度将不同。你确定吗？如果是这样的话，我会再试一次。我明白了，我认为你是对的，卡片的大小将在空间内均匀分布，因此如果你的物品较少，每张卡片都会变小。你能根据卡片的数量来确定容器的尺寸吗？因此，如果一整行有10张卡片，而一行有9张，那么容器的实际大小是9/10。如果在渲染之前知道有多少张卡？