标签: react-bootstrap

我想使用 React 构建我自己的基于 Web 的 MS Paint 版本。我已经编写了基本的 javascript canvas 代码，现在我想制作一个漂亮的 gui，顶部有一个菜单栏，左侧有一个部分用于选择要使用的工具等。

谁能推荐一款带有按钮、菜单栏等预制组件的拖放软件，让我可以轻松制作专业外观的用户界面？另外，如果我能提供一些关于我的工作流程的建议，我将不胜感激。

我的目标是让标题和内容占页面宽度的 100%。我没有 css 文件，而是使用 mantine 作为样式。我尝试过将不同组件的宽度编辑为 100%，但没有成功。一旦我的页面使用 100% 宽度，最终目标是使用显示网格来组织列中的组件。我希望我的 WeatherComponent 填充整个宽度，所以说 gridColumnStart: 1 到 4 TodoList 开始和结束 1 到 2，NewsComponent 开始和结束 2 到 4。 这是我的仪表板，其中呈现组件：

import { Container } from '@mantine/core';

import { Group } from '@mantine/core';
import NewsComponent from '../components/NewsComponent';
import TodoList from '../components/TodoList';
import WeatherComponent from '../components/WeatherComponent';

const Dashboard = () => {
  return (
    <Container style={{ display: 'grid', gap: '20px' }}>
      <Group style={{ gridColumn: '1 / span 3' }}>
        <WeatherComponent />
      </Group>
      <Group style={{ gridColumnStart: 1, gridColumnEnd: …

现象

当react-bootstrap和react- Three/drei结合使用时，react-bootstrap中出现以下错误

表达式生成的联合类型太复杂而无法表示。ts(2590)

代码位于下面的代码沙箱中。

https://codesandbox.io/s/react-r3f-r3d-bootstrap-t7111f?file=/src/App.tsx

文件名：App.tsx 行：40

import "./styles.css";
import { useRef } from "react";
import { Button } from "react-bootstrap";
import { Canvas, useFrame } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";

const Box = (props: JSX.IntrinsicElements["mesh"]) => {
  const ref = useRef<THREE.Mesh>(null!);

  useFrame((state) => {
    ref.current.rotation.x += 0.01;
    ref.current.rotation.y += 0.01;
    ref.current.rotation.z += 0.01;
  });
  return (
    <mesh ref={ref} {...props}>
      <boxBufferGeometry />
      <meshPhysicalMaterial color="blue" />
    </mesh>
  );
};
export default function App() {
  return (
    <div …

我的jsx文件成功识别react-bootstrap元素,但它们没有样式.我的项目的node-modules文件夹包含react-bootstrap和bootstrap.为什么会这样？

var React = require('react');
var Button = require('react-bootstrap').Button;
var Jumbotron = require('react-bootstrap').Jumbotron;

var ReactComponentHi = React.createClass({displayName: 'Hi',

    render: function() {
        return (
            <div>
                <Button bsStyle='success'>
                    clickk
                </Button>
                <Jumbotron>
                    <h1>Hello, world!</h1>
                    <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
                    <p><Button bsStyle='primary'>Learn more</Button></p>
                </Jumbotron>
            </div>

        );
    }
});

module.exports = ReactComponentHi;

我从这里获取了受控轮播的示例代码：https : //react-bootstrap.github.io/components.html#media-content

我正在尝试通过我的redux设置在es6中使用它，但是可惜！尽管我竭尽全力，但我仍然收到以下错误消息：

SlideShow.js？d20f：20未捕获的TypeError：无法读取未定义的属性“ direction”

1. 我在以下代码中没有绑定/做错了什么？
2. 我可以在愚蠢的组件中处理这种状态吗？
3. 为什么哦，为什么忘恩负义的英国人离开我们呢？;（（很抱歉）

这是我愚蠢的组件（component / sldeshow.js）：

 import React, { Component, PropTypes } from 'react'
import { List } from 'immutable'
import { Link } from 'react-router'
import { Carousel } from 'react-bootstrap'

class Slides extends Component {

constructor(props) {
    super(props)
    this.state = {
      index: 0,
      direction: null
    }

    // Bind callback methods to make `this` the correct context.
    this.handleSelect = this.handleSelect.bind(this)

  }

  handleSelect(selectedIndex, e) {
    alert('selected=' + selectedIndex + ', direction=' + e.direction) …

我想创建一个基于Bootstrap Popover的自定义反应弹出窗口,只需要我自己的设计和更多道具.

我创建了一个名为MyTooltip的新反应组件:

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

export default class MyPopover extends Component{
  constructor(props){
    super(props);
  }

  render() {
    return (
        <Popover id="popover-trigger-focus" title={this.props.title}>
           { return this.props.children }
        </Popover>
    );
  }
}

在我的主要组件中,我试图创建一个触发器:

export default class MyMainComponent extends Component{

  render() {

    const popoverFocus = (
        <MyPopover id="tooltip-trigger-focus"  title="My Title">
          my text <b>my bold text</b> my text
        </MyPopover >
    );

    return (
      <div >

          <OverlayTrigger trigger="focus" placement="bottom" overlay={popoverFocus}>
            <Button>Focus</Button>
          </OverlayTrigger>

      </div>
    );
  }
}

但它不起作用.该按钮确实隐藏并显示带有正确文本的弹出窗口,但是弹出窗口忽略"placement"属性并且它没有淡入淡出动画. …

该react-leaflet地图不得到适当的渲染。

• 地图绘制在其父级边界之外
• 地图的某些图块丢失

当将地图与标准react组件一起使用时，会发生此问题。

我的网站也使用react-bootstrap。如我所读，这可能会导致如何react-leaflet渲染某些潜在问题。

import React from 'react';
import ReactDOM from 'react-dom';
import { Map, Marker, Popup, TileLayer } from 'react-leaflet';

const position = [37.335556, -122.009167];

class MapView extends React.Component {
    render() {
        return (
                  <div
                    style={{
                        height:"100%"
                    }}>
                    <Map center={position} zoom={13}>
                        <TileLayer
                          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
                          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                        />
                        <Marker position={position}>
                          <Popup>
                            <span>A pretty CSS3 popup.<br/>Easily customizable.</span>
                          </Popup>
                        </Marker>
                      </Map>
                  </div>
        );
    }
}

module.exports = MapView;

我正在使用React-Bootstrap，我想获取输入表单的值，以便可以将它们保存到Firebase。在使用React-Bootstrap之前，我能够通过使用ref, but now I am not able to do that after usingFormGroups` 来获取输入值和文本区域。提交表单后，我无法从输入和文本区域中获取值。

我已经看过有关此问题的上一篇文章，但似乎这些解决方案均无法正常工作。

我是React的新手。有人可以向我解释如何从使用Formgroups中获取表单值吗？

import React from 'react'
import ReactDOM from 'react-dom'
import {withRouter} from 'react-router'
import './NewListPage.css'
import Header from './Header'
import ListItem from './ListItem'
import database from '../database'
import Form from './Form'
import {
  Button,
  FormGroup,
  FormControl,
  Feedback,
  ControlLabel
} from 'react-bootstrap';

class NewListPage extends React.Component {
  // bring props into constructor
  constructor(props) {
    // bring props into super
    super(props)
    //create list uuid this needs …

我正在尝试创建一个通用组件，可以在其他应用程序中重用。我需要知道渲染后组件的宽度，以便可以修改组件的内容。

我一直在尝试使用不同的生命周期来做出反应而没有成功。

componentDidUpdate() {
  console.log('width', this.element.offsetWidth);
}

render() {
  return (
    <div ref={(element) => {this.element = element }} />
  );
}

尝试此操作时，我得到的是屏幕的宽度，但是如果更改窗口的大小，则会得到该组件的宽度。查看Chrome日志：

ComponentDidMount在渲染之前执行，因此this.element是undefined。

我也尝试过使用npm中的其他库来解决这个问题。

更多信息：组件必须在Bootstrap列中以不同的宽度工作。

render() {
  <Row>
    <Col sm={3} />
      <MyComponent />
    </Col>
    <Col sm={9} />
      <MyComponent />
    </Col>
  <Row>
}

澄清，我不想调整窗口大小，对于不明确，我深表歉意。我提到调整大小的唯一原因是，当创建DOM并调整大小时，我在中获得了正确的值offsetWidth。我正在寻找一种无需调整大小即可获得正确值的解决方案。后期渲染函数调用，侦听器，一些不可思议的魔术或其他解决方案。我的问题是我对虚拟DOM和实际DOM缺乏了解。

我有一个现成的分页组件：https : //www.npmjs.com/package/react-js-pagination

import React, { Component } from "react";
import ReactDOM from "react-dom";
import Pagination from "react-js-pagination";
require("bootstrap/less/bootstrap.less");

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activePage: 1,
      todos: []
    };
  }

  handlePageChange(pageNumber) {
    console.log(`active page is ${pageNumber}`);
    this.setState({activePage: pageNumber});
  }

  render() {
    return (
      <div>
        <Pagination
          activePage={this.state.activePage}
          totalItemsCount={this.state.todos.length}
          pageRangeDisplayed={2}
          onChange={this.handlePageChange}
        />
      </div>
    );
  }
}

如何将分页从分页转换react-js-pagination为https://react-bootstrap.github.io/components/pagination/ ？react-bootstrap