标签: react-bootstrap

我正在尝试使用react-bootstrap面包屑，如下所示。

<Breadcrumb>
    <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
    <Breadcrumb.Item><Link to={"/products"}>Products</Link></Breadcrumb.Item>
    <Breadcrumb.Item active>{productName}</Breadcrumb.Item>
</Breadcrumb>

正如您所料，productsLink 将在另一个锚标记内呈现锚标记，这是无效标记。但是Home创建一个简单的锚标记而不是反应Link使页面重新加载，使其无法使用。

对此有什么解决方案？不幸的是，react-bootstrap文档中没有提到这一点。（链接）

我是 React 的新手，正在使用react-bootstrap 中的 Table 组件。

我想按“到期前的天数”列的升序对表格进行排序。

但是 Table 组件没有排序属性，有人知道我该怎么做吗？

我是反应 js 的新手。我正在尝试创建一个组件。为此，我已经安装了成功安装的引导程序（版本 4.1.1）。

然后我在 index.js 中导入了相同的内容，并在重新加载页面 (localhost:3000) 时收到错误消息：

Module not found: 
Can't resolve 'bootstrap/dist/css/bootstrap.css' in 'C:\Users\test\counter-app\src'

Run Code Online (Sandbox Code Playgroud)

我的index.js：

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import "bootstrap/dist/css/bootstrap.css";

ReactDOM.render(<App />, document.getElementById("root"));

serviceWorker.unregister();

我的package.json：

{
  "name": "counter-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-scripts": "2.1.8"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }, …

我正在按照下面的示例来实现“逐列扩展”。

/* eslint max-len: 0 */
import React from 'react';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';

const products = [];

function addProducts(quantity) {
  const startId = products.length;
  for (let i = 0; i < quantity; i++) {
    const id = startId + i;
    if (i < 3) {
      products.push({
        id: id,
        name: 'Item name ' + id,
        price: 2100 + i,
        expand: [ {
          fieldA: 'test1',
          fieldB: (i + 1) * 99,
          fieldC: (i + 1) * Math.random() * …

我正在使用版本：

react@16.8.6
react-bootstrap@1.0.0-beta.8

我对在 react、react-bootstrap 和 flexbox 之间应该做什么感到有些困惑。我在名为 LoginImage.js 的文件中有一个简单的图像定义：

import React, { Component } from 'react'
import { Image } from "react-bootstrap";

class LoginImage extends Component {
  render() {
    return (
      <Image width="150" src="/staff_login.jpg" />
    );
  }
}

export default LoginImage;

我在 App.js 文件中使用它，如下所示：

import LoginImage from './LoginImage'
...
    <Container>
      <Row>
        <Col xs={12} sm={4} md={4}>
          <LoginImage />
        </Col>
      </Row>
    </Container>

我知道 CSS3 和 Flexbox 分别提供“justify-content”和“align-items”来水平和垂直定位，但不清楚我应该在上面的代码中在哪里使用它们，或者这是否是最好的方法根据我上面的内容将图像居中。

我很感激任何帮助。谢谢。

我有一个react-bootstrap带有<input>. 我想在<input>

以下工作正常，但在控制台中显示警告

<input type="text" autofocus='true' />

Warning: Invalid DOM property `autofocus`. Did you mean `autoFocus`?

以下选项不起作用，因为它们在打开模态时不会聚焦输入：

<input type="text" autoFocus='true' />
<input type="text" autoFocus={true} />
<input type="text" autoFocus />

设置自动对焦的推荐方法是什么。或者我应该如何使运行良好的示例的警告静音？

注意：这是反应 16.8.6

我已经构建了一个 Rails 6 应用程序，它使用 React 作为前端并使用 Bootstrap React 作为我的样式组件。在本地一切正常，但是当我部署到 Heroku 并尝试创建“中断”时，它会引发以下错误：

Modal.js:21 Uncaught TypeError: Cannot convert undefined or null to object
    at hasOwnProperty (<anonymous>)
    at Modal.js:21
    at Array.forEach (<anonymous>)
    at Modal.js:20
    at t.n.render (Modal.js:302)
    at Qi (react-dom.production.min.js:4243)
    at Ji (react-dom.production.min.js:4234)
    at wc (react-dom.production.min.js:6676)
    at yu (react-dom.production.min.js:5650)
    at Mu (react-dom.production.min.js:5639)

同样，<Modal>本地打开正常。无需动手动扳手模块本身，是否有更简单的解决方法或解决方案？

这是我的父组件：

import React, { Component } from "react";
import RecurringOutageComponent from "./components/RecurringOutageComponent";
import FutureOutageComponent from "./components/FutureOutageComponent";
import CurrentOutagesComponent from "./components/CurrentOutagesComponent";
import CreateModalComponent from "./components/CreateModalComponent";
import { Container, Row, …

我有这个 React Bootstrap 类，我知道如何在单击按钮时捕获它的值？如何在文档中看到这一点？

花了很多时间...

这是我在控制台中带有警告的代码警告：React 无法识别inputRefDOM 元素上的道具。如果您有意希望它作为自定义属性出现在 DOM 中，请将其拼写为小写inputref。如果您不小心从父组件传递了它，请将其从 DOM 元素中删除。：

import React, { Component } from 'react';
import { Button, Form } from 'react-bootstrap';
import '../../styles/feedback-send.css';

class FeedbackSend extends Component {
  constructor(props) {
    super(props);
    this.inputNode = '';
  }

  onSubmit() {
    const data = this.inputNode.value;
    console.log(data);
  }

  render() {
    return (
      <Form.Group className="m-0">
        <Form.Control
          className="textFeedback"
          as="textarea"
          rows="3"
          placeholder="feedback"
          inputRef={(node) => { this.inputNode = node; }}
          type="text"
        />
        <Button
          className="btnFormSend"
          variant="outline-success"
          onClick={this.onSubmit} …

我最近开始在我的 react-typescript 项目中使用故事书，但遇到了以下问题：

1. 我的 react-bootstrap 组件没有样式。组件已加载但没有样式。我尝试在自定义 webpack 配置中使用样式加载器和 css 加载器，但没有奏效。
2. 我正在导入一些本地字体，但字体始终加载在 Fonts 文件夹中。有没有办法在 /static/fonts 目录中加载字体？我正在使用文件加载器来加载字体。
3. 我有一个 globalStyles.tsx 文件和一个 iconStyles.tsx 文件，我想将它们全局包含在故事板 iframe 中。最好的方法是什么？

我在本地主机上本地运行故事书。

下面是我的带有自定义 webpack 配置的 main.js：

module.exports = {
  stories: ['../src/stories/**/*.stories.[tj]s','../src/stories/**/*.stories.tsx'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
  webpackFinal: async config => {
    config.module.rules.push({
      test: /(?<!.*\.test)\.(ts|tsx)$/,
      use: [
        {
          loader: require.resolve('ts-loader'),
        }
      ]
    },
    {
      test: /\.ttf$|\.woff$|\.eot$|\.otf$/,
      use: [
        {
        loader: 'file-loader',
        options: {
          outputPath: '/static/fonts',
        },

        },
      ]

    },
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }
    );
    config.resolve.extensions.push('.ts', '.tsx');
    return config;
  }, …

我正在尝试构建一个旋转木马，就像亚马逊主页上的一样。我将 React Bootstrap 用于轮播，但它似乎不起作用。它只是像在列中一样堆叠每个项目。

<Carousel>
                <Carousel.Item>
                    <img src={'https://images-na.ssl-images-amazon.com/images/G/01/AmazonExports/Fuji/2020/October/Fuji_Tallhero_Dash_en_US_1x._CB418727898_.jpg'} alt="" />
                </Carousel.Item>

                <Carousel.Item>
                    <img src={'https://images-na.ssl-images-amazon.com/images/G/01/AmazonExports/Events/2020/PrimeDay/Fuji_TallHero_NonPrime_v2_en_US_1x._CB403670067_.jpg'} alt="" />
                </Carousel.Item>
            </Carousel>

答案中接受使用 React Bootstrap 以外的任何其他框架的代码。