Javascript 如何在TransitionMotion包装器中映射？

我正在尝试实现react motion的TransitionMotion包装器，并将其应用到home stretch，但还有一个问题。在本例中，插值数组由两个元素组成（因为chartConfigs.length当前为2），我在第一个元素中嵌套了另一个贴图。其他一切都很好，除了我只想要一行，但我显然得到了两行。如何以干净的方式解决这个问题

const getStyles = () => {
    return chartConfigs.map(datum => ({
      data: datum,
      style: {
        opacity: spring(1, { stiffness: 30})
      },
      key: datum.name
    }))
  }

  const getDefaultStyles = () => {
    return chartConfigs.map(datum =>({
      data: datum,
      style: {
        opacity: 0
      },
      key: datum.name
    }))
  }

return (
      <TransitionMotion
        defaultStyles={getDefaultStyles()}
        styles={getStyles()}

      >
        {(interpolated) => (
          <div>
            {interpolated.map((config) => (
              <div key={config.key} style={{ ...config.style }}>
                <div className='row' style={{ paddingTop: "30px" }}>
                  {chartConfigs.length > 1 && 
                    chartConfigs.map((chartConfig, i) => {
                      return (
                        <div
                          className={`col-lg-${columnsCount}`}
                          key={"chart-toggler" + i}
                        >
                            <div className='card m-b-30'>
                              <h4 className='card-title font-16 mt-0'>
                                {chartConfig.name}
                              </h4>
                            </div>
                          </div>                  
                      )
                    })}
                </div>
              </div>
            ))}
          </div>
        )}
      </TransitionMotion>
    )

---

谢谢你的时间和帮助

TransitionMotion有意提供的行数多于当前渲染的行数，因为它会记住正在制作动画的所有行

---

所以这取决于你在这里想要实现什么。我的直觉是你可能在内心层面被滥用了。您应该访问config.data.name而不是chartConfig.name，否？你知道我的意思吗？

TransitionMotion故意提供的行数超过当前渲染的行数，因为它会记住正在制作动画的所有行

---

所以这取决于你在这里想要实现什么。我的直觉是你可能在内心层面被滥用了。您应该访问config.data.name而不是chartConfig.name，否？你知道我的意思吗？

是的，谢谢你指出这一点！我最初确实尝试过，它也让我走得很远。我最终再次陷入困境的地方是将div安排在row div中。同样，这不一定是react motion的问题，但因为我仍然不熟悉编码：）因此我摆脱了重复行问题，所有元素都在一个row元素中，但都在彼此之上。我不确定为什么

display:inline block

不能解决这个问题，我能想到的与以前样式的唯一区别是在映射插值之前的div。我将在下面发布编辑后的版本，谢谢你指出这一点！我最初确实尝试过，它也让我走得很远。我最终再次陷入困境的地方是将div安排在row div中。同样，这不一定是react motion的问题，但因为我仍然不熟悉编码：）因此我摆脱了重复行问题，所有元素都在一个row元素中，但都在彼此之上。我不确定为什么

display:inline block

不能解决这个问题，我能想到的与以前样式的唯一区别是在映射插值之前的div。我将在下面发布编辑后的版本

<div className='row' style={{ paddingTop: "30px" }}>
    {chartConfigs.length > 1 ? 
      <TransitionMotion
        defaultStyles={getDefaultStyles()}
        styles={getStyles()}
        willEnter={willEnter}
        willLeave={willLeave}
      >
        {interpolated => (
          <div id='container' style={{width: '100%', display: 'inline-block'}} >
            {interpolated.map((config, i) => (
              <div key={config.key} style={{ ...config.style }}>
                {(selected = config.data.name === currentChartName)}
                <div
                  className={`col-lg-${columnsCount}`}
                  key={"chart-toggler" + i}
                >
                  <div
                    className={
                      selected
                        ? "card m-b-30 text-white bg-primary"
                        : "card m-b-30"
                    }
                    style={{
                      width: '100%',
                      height: "calc(100% - 30px)",
                    }}
                    onClick={() => setCurrentChartName(config.data.name)}
                  >
                    <div className='card-body'>
                      <h4 className='card-title font-16 mt-0'>
                        {config.data.name}
                      </h4>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </TransitionMotion>
      : null }
    </div>

const willLeave = () => ({
  opacity: spring(0)
})