Question

我很难为列表中的3个不同元素设置动态宽度

这里的想法是填充一个条，以便3个div长度的总和为100％。 like this

这3个div具有完全随机的值，我可以从它们的长度中得到它们（有数组）。

我正在尝试使用calculateWidth函数设置宽度，该函数调用了3次以获得3种不同的大小。

注意：我从Redux收到了所有道具。

这是简化的代码：

function calculateWidth(x, y, z) {
   let value;
   let sum = x + y + z;
   value = (100 * x)/sum;
   return value
}

let commentsList =
    article &&
    article.comments.map((comment, index) => (

      <Link to={`/${comment.slug}`} key={index}>

   {calculateWidth(comment.rating.good.length, comment.rating.good.length, comment.rating.good.length)}
   {calculateWidth(comment.rating.average.length, comment.rating.good.length, comment.rating.bad.length)}
   {calculateWidth(comment.rating.bad.length, comment.rating.average.length, comment.rating.good.length)}


        <div className="comment-regular" style={}> {comment.rating.good.length}</div>
        <div className="comment-regular" style={}> {comment.rating.average.length}</div>
        <div className="comment-regular" style={}> {comment.rating.bad.length}</div>  

      </Link>                      
));

calculateWidth函数将为我提供3格的正确百分比。

如何访问此值并将其放在每个div样式属性中？
像style={width: $（something）`+％}

之类的东西

谢谢

Answer 1

内联样式在jsx中表示为javascript对象。

使用3个变量，例如width1，width2和width3使用对象中的模板文字作为'width'键的值。

<div className="comment-regular" style={{'width' : `${width1}%`}}>

更改地图函数以获取这三个值，然后返回jsx。

article.comments.map((comment, index) => {

const width1 = calculateWidth(comment.rating.good.length, comment.rating.good.length, comment.rating.good.length)
 const width2=calculateWidth(comment.rating.average.length, comment.rating.good.length, comment.rating.bad.length)
  const width3=calculateWidth(comment.rating.bad.length, comment.rating.average.length, comment.rating.good.length)
return (

      <Link to={`/${comment.slug}`} key={index} >


        <div className="comment-regular" style={{'width' : `${width1}%`}}> {comment.rating.good.length}</div>
        <div className="comment-regular" style={{'width' : `${width2}%`}}> {comment.rating.average.length}</div>
        <div className="comment-regular" style={{'width' : `${width3}%`}}> {comment.rating.bad.length}</div>  

      </Link>                      
)});

Answer 2

{}中的表达式（松散地放在JSX中）将值返回到void中，并且在任何地方都没有使用它们。您应该在style={}内部调用它。

我不由自主地进行了一些破坏，这让我看到，在第一种情况下，你的表现还不错。在calculateWidth(comment.rating.good.length, comment.rating.good.length, comment.rating.good.length)之类的呼叫上进行操作很容易出错，因为头脑需要阅读更多的文本。

function calculateWidth(x, y, z) {
    return (100 * x) / (x + y + z);
}

let commentsList =
    article &&
    article.comments.map(({ comment: { slug, rating: { good: { length: goodCount }, average: { length: averageCount }, bad: { length: badCount } } } }, index) => (
        <Link to={`/${slug}`} key={index}>
            <div className="comment-regular" style={{ width: calculateWidth(goodCount, badCount, averageCount) + '%' }}> {goodCount}</div>
            <div className="comment-regular" style={{ width: calculateWidth(averageCount, goodCount, badCount) + '%' }}> {averageCount}</div>
            <div className="comment-regular" style={{ width: calculateWidth(badCount, averageCount, goodCount) + '%' }}> {badCount }</div>  
        </Link>                      
    ));

列表渲染中的动态样式

2 个答案: