问题标签 [react-bootstrap]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
518 浏览

reactjs - 通过 3rd 方反应组件传递数据

我有以下反应组件结构:

  • 我的编辑器
    • 引导选项卡
      • 组件网格
        • 图 1
        • 图 2
        • 图像 x

在 myEditor 组件中,我有一个设置状态的函数 componentSelected()。在我编写了每个组件的应用程序中,我只是通过组件树将 componentSelected() 函数作为道具传递并从图像对象中调用它。

componentSelected={this.props.componentSelected}

但是,在这个应用程序中,我使用的是第 3 方组件。准确地说是引导选项卡。如何通过第 3 方组件将我的 componentSelected() 函数传递给它的子组件,以便他们可以调用它?

这引出了一个单独的问题。我误解了 React 吗?我可以在 React 组件树上调用一个函数而不将它作为道具传递给组件吗?如果是这样,怎么做?

谢谢!

0 投票
3 回答
14153 浏览

reactjs - 为 React Bootstrap 显示的触发模式

http://react-bootstrap.github.io/components.html#modals - 我正在寻找一种方法来找到“shown.bs.modal”而不是“show.bs.modal”的触发事件。

我没有看到有关某些引导模式事件的任何文档:http: //getbootstrap.com/javascript/#modals-events

我什至试图通过在 jQuery 中将它放在一边来破解它,这也不起作用。

知道如何触发“显示”事件吗?我在 react-bootstrap 源中也找不到任何东西。

0 投票
2 回答
695 浏览

reactjs - 无法安装反应引导

在我的通量应用程序中,我尝试安装 react-bootstrap 然后出现错误peerinvalid Peer react-bootstrap@0.24.3 wants react@>=0.13

我的 package.json 中的反应是"react": "^0.13.3"

错误: 在此处输入图像描述

0 投票
1 回答
1281 浏览

reactjs - 打开/关闭 Popover 时,React Bootstrap 状态不会持续存在

我正在使用React Bootstrap,并且在使用 OverlayTrigger/Popover 时遇到了任何问题。当我关闭弹出窗口并重新打开它时,它的状态<ComponentWithState />被丢弃。

问题的现场示例。要复制:单击按钮,单击链接,注意文本如何从“状态:关闭”变为“状态:打开”。关闭弹窗(点击旁边的按钮或重新单击按钮),然后重新单击按钮打开弹窗。请注意文本如何显示“状态:关闭”。状态没有持续(不说“状态:开启”)。

想法如何使状态在关闭/重新打开弹出窗口之间保持不变?

0 投票
1 回答
3353 浏览

twitter-bootstrap - React-bootstrap 制作一个有标题但没有正文的面板

react-bootstrap库中<Panel>定义了元素。如何渲染带有标题而没有正文的面板?

给我只是

如何使用panel-body类删除不必要的 div?

0 投票
2 回答
2866 浏览

javascript - 使用 ajax 数据反应 Bootstrap 表

我正在使用 react-bootstrap-table 来显示一些数据,这些数据来自 ajax 结果。

这是行不通的,但是如果我把一些真实的数据放进去,它就会起作用,就像这样:

似乎引导表需要具有非空数据才能使其工作。那么如何让表格等待ajax完成然后抓取数据呢?

0 投票
1 回答
252 浏览

reactjs - 无法开始使用 react-bootstrap

我刚开始使用 react,虽然一切都很好,但我无法开始使用 react-bootstrap 这是我的 .html 文件的样子:

不工作。

我收到解析错误:相邻的 JSX 元素必须包含在封闭标记中

任何帮助都深表感谢。

更新:

问题已解决。

解决方案:使它:

还添加,

0 投票
1 回答
2891 浏览

javascript - Uncaught TypeError: Cannot read property 'firstChild' of undefined in React, React-Bootstrap

My code was fine until I tried demoing a ReactBootstrap Modal. When I initialized the show prop passed to my Modal component from my top-level component to true (this.state.showResult in QuizApp), I keep getting
Uncaught TypeError: Cannot read property 'firstChild' of undefined
When showResult is initialized to false, it works fine.

The error occurs whenever show prop of Modal is set to true.

Eventually I'll have event handlers that set showResult to true, but for now I just wanted to see what the Modal would look like, thus initializing showResult: true.

The only relevant information I could find was that this error is caused by multiple versions of React on the same page, but I don't think that applies here. I'm creating a really simple app, doing all my transpiling/building in the browser itself, no pre-building with node
TypeError when using React: Cannot read property 'firstChild' of undefined

What makes the situation even more confusing is that show is a newly added prop that shows up in the code examples on ReactBootstrap docs but I couldn't find anything written about it in the docs.
How to open/close react-bootstrap modal programmatically?

class QuizApp

class Result

Demo: http://codepen.io/prashcr/pen/NqVbzE

0 投票
1 回答
2433 浏览

reactjs - 反应引导按钮

对于我正在构建的小型应用程序,我需要连续两个按钮。由于该应用程序是基于 reactjs 构建的,因此我使用的是 react-bootstrap。

整个事情在桌面上运行良好,但在移动设备上,最后两个按钮像这样相互移动: 在此处输入图像描述

只有当最后两列包含按钮时,才会出现此问题。

最后两列的代码:

按钮代码:

有谁知道如何解决这一问题?

0 投票
2 回答
9033 浏览

reactjs - React Bootstrap Validation use validated input in sub component

I am using react-bootstrap-validation that decorates the react-bootstrap Input tag.

The ValidatedInput requires that it is inside a Form component. When I add my ValidatedInput to a custom sub component I get an error saying it needs to be inside a Form which it is, but I guess it is further down the tree now so can not see the Form.

Is there a way of referencing the parent Form so the ValidatedInput can see the parent.

Looking at the source of the Validation lib I can see that the ValidationInput needs to register to the Form but am not sure how to do this from the sub component.