Recharts Responsive Container 错误地改变了大小 flexbox
我正在尝试为数据可视化应用程序创建自定义生殖传奇。 他用 react 和 recharts. 该组件首次可视化。 但是,当我转动图例并再次打开它时,响应容器不会压缩以适合。 如果我以像素中的大小上了解父容器的大小,但我没有关于渲染的信息。 这是一个C.错误 recharts 或者 flex box, 还是我做错了?
这是代码:
https://codesandbox.io/s/8krz9qjk52
说明:问题是,当我关闭时,然后打开一个图例,将传奇组件推出查看视图,并且该图不会被压缩回初始较小尺寸。
这是代码:
https://codesandbox.io/s/8krz9qjk52
说明:问题是,当我关闭时,然后打开一个图例,将传奇组件推出查看视图,并且该图不会被压缩回初始较小尺寸。
没有找到相关结果
已邀请:
3 个回复
詹大官人
赞同来自:
查看此问题:
https://github.com/recharts/recharts/issues/172
</responsivecontainer>
知食
赞同来自:
https://codesandbox.io/s/xpz8y5w77w
我会列出我最大的更改,最小的更改:
一世
https://reactjs.org/docs/lifting-state-up.html
从
到
.
现在
负责发生的事情。 它传输有关可见性的信息
作为支持。 如何
在需要更改状态时学习?
有一个名为的成员函数
, 这使他的病情。
船B.
作为支持。 所以,
剪辑
像这样:
现在B.
我们可以在定义中包含它
:
请注意,如果初始函数绑定到父级,则此模板仅适用,因为它更改了父级的状态。
现在是
https://gridbyexample.com/examples/
容器。
它根据状态显示将列宽处理的内置样式。
注意
- 这是一个分数单位,在这种情况下,它可以填充剩余空间。
在
价值
一样
, 这允许您以列的形式将对象放入网格中。 我们放入网格的东西, - 这是
和
, 所以
-log列,和
-正确的。
: 当图例可见时,我们希望左栏占用 80% 宽度和右栏填充 rest.
: 当图例是不可见的,我们希望右栏占用填充其元素的最小空间,左列填充剩余空间。
只有一种方法
.
反而
和
有一个方法有条件呈现
基于必要条件 /将取决于国家
/.
现在始终呈现 /这是一个网格元素/.
其他小变化:
在
:
它被改变,因为
实际上是发
作为支持。 小心! 你需要安装
直接在返回的层次结构中的父标记上
/在这种情况下
/. 试着返回K.
https://codesandbox.io/s/8krz9qjk52
并改变
在
在
/什么都没发生!/.
在所有情况下
, 因为他不再需要。
你会注意到 , 如果您尝试仅使用网格布局,该怎么办?
测量单位或任何灵活的布局
, 图的大小不会正确更改。 很遗憾, Recharts'
只是不好玩 Grid 或者 Flexbox /项目中的主要参与者逐渐减少支持 –
https://github.com/recharts/re ... ivity
期间 3 此时几个月/.
</responsivecontainer></div>
<div class="answer_text">
将以下内容添加到您的
:
否则
, 即使安装了宽度和高度 100%,, 它不会占据整个物种屏幕。 然后B.
更改:
为此:
让你的身高
'... 好吧,响应。
</responsivecontainer></responsivecontainer></div>
知食
赞同来自:
:
否则
, 即使安装了宽度和高度 100%,, 它不会占据整个物种屏幕。 然后B.
更改:
为此:
让你的身高
'... 好吧,响应。
</responsivecontainer></responsivecontainer>