小编Lia*_*m G的帖子

React-Bootstrap 行/列不是屏幕的全宽(只有 50%)

自从我开始编写 HTML 以来,我在 CSS 和 Bootstrap 方面的经验,当涉及到在屏幕上定位和调整元素大小时,一直非常糟糕。我想要做的(在我的 React 项目中)是在屏幕上并排放置 2 个元素,左边的元素需要是屏幕宽度的 80%,右边的元素必须是屏幕宽度的 20%屏幕宽度。显然,引导程序能够做到这一点,需要 4 周的时间编写代码、20 多个堆栈溢出问题和 1 个人牺牲。

下面是一个主要的应用程序组件<React.Fragment/>标签和<Container/>使用<Row/>以及<Col/>内部的:

import React, { Component } from "react";
import { Container, Row, Col } from "react-bootstrap";

class App extends Component {
  state = {};
  render() {
    return (
      <React.Fragment>
        <Container>
          <Row>
            <Col>Hello</Col>
            <Col>Hello2</Col>
          </Row>
        </Container>
      </React.Fragment>
    );
  }
}

export default MainContent;
Run Code Online (Sandbox Code Playgroud)

预期结果?Hello将在屏幕的左侧,Hello2将在屏幕中间的右侧。正如这里的文档所建议的那样。

但当然这不会发生。该行在屏幕中间居中,总宽度约为屏幕尺寸的一半。

为了显示: 25% Whitespace | …

html css reactjs react-bootstrap

16
推荐指数
1
解决办法
2万
查看次数

Deck.gl (Mapbox) StaticMap 不会调整大小 - 覆盖屏幕上的所有内容

我正在尝试将基本的deck.gl(mapbox 静态地图)添加到反应项目中 - 我可以这样做;然而,一旦地图被加载,它就会占据整个页面,并且任何其他信息都隐藏在地图后面。例如,我<p>在地图上方的a 中有一些文本,当它应该显示在地图上方时,它会隐藏在地图后面。

任何调整地图所在 div 大小的尝试均未成功: margin-top, height etc..

该类称为 DglMap

class DglMap extends Component {
  render() {
    const layers = [];
    return (
      <div className="dglMapStyle">
        <DeckGL
          initialViewState={initialViewState}
          controller={true}
          layers={layers}
        >
          <StaticMap mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} />
        </DeckGL>
      </div>
    );
  }
}
Run Code Online (Sandbox Code Playgroud)

添加到名为 Content 的类

class Content extends Component {
  state = {};
  render() {
    return (
      <div>
        <BaseMap />
      </div>
    );
  }
}
Run Code Online (Sandbox Code Playgroud)

添加到 app.js

function App() {
  return (
    <Router>
      <div>
        <SomeText />
        <Route exact path="/" component={MainContent} …
Run Code Online (Sandbox Code Playgroud)

html mapbox reactjs deck.gl

5
推荐指数
1
解决办法
1180
查看次数

由于 Gradle 无法编译 Intellij(Swing)GUI

我有一个 Gradle 项目,我正在尝试创建一个 GUI(Swing,使用 Intellij);但是,我一直收到编译错误。完全相同的 GUI 代码可以在标准 Java 项目上运行并且编译良好。

图形用户界面

package gui;
import javax.swing.*;

public class ApplicationGUI {
    private JPanel rootPanel;
    private JLabel testLabel;

    public static void main(String[] args) {
        JFrame frame = new JFrame("ApplicationGUI");
        frame.setContentPane(new ApplicationGUI().rootPanel);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.pack();
        frame.setVisible(true);
    }
}
Run Code Online (Sandbox Code Playgroud)

摇篮

dependencies {
    testCompile group: 'junit', name: 'junit', version: '4.12'

    compile 'ca.uhn.hapi.fhir:hapi-fhir-base:3.7.0'
    compile 'ca.uhn.hapi.fhir:hapi-fhir-structures-dstu3:3.7.0'
    compile 'ca.uhn.hapi.fhir:hapi-fhir-client:3.7.0'
}
Run Code Online (Sandbox Code Playgroud)

错误

任务 :ApplicationGUI.main() FAILED 线程“main”中的异常 java.awt.IllegalComponentStateException: contentPane 不能设置为 null。在 javax.swing.JRootPane.setContentPane(JRootPane.java:621) 在 javax.swing.JFrame.setContentPane(JFrame.java:698) 在 gui.ApplicationGUI.main(ApplicationGUI.java:11)

在我的设置中,我将 GUI 设计器设置为 Java 源代码。

我究竟做错了什么?

干杯 …

java user-interface swing intellij-idea gradle

3
推荐指数
2
解决办法
3229
查看次数

Python:遍历列表并删除重复项(不使用 Set())

所以我有一个清单:

s = ['cat','dog','cat','mouse','dog']
Run Code Online (Sandbox Code Playgroud)

我希望能够遍历列表并删除重复项,而不使用 set() 函数!因此,例如它应该删除“cat”和位置 s[2],但将“cat”保留在位置 s[0]。然后它需要为“狗”做同样的事情,即。将“狗”保留在位置 s[1],但从位置 s[4] 移除“狗”。

所以输出是:

s = ['cat','dog','mouse']
Run Code Online (Sandbox Code Playgroud)

我尝试使用 i 和 j 作为列表中的索引位置,并检查位置 i 处的元素是否等于位置 j 处的元素。如果是,它将删除它并将 j 的值增加 1,否则它将离开它并只增加 j 的值。遍历整个列表后,它将增加 i 的值,然后再次检查整个列表,以查找新元素。以下:

i = 0
j = 1
for a in range(len(s)):
    for b in range(len(s)):
        if s[i] == s[j]:
            s.remove(s[j])
            j = j + 1
        else:
            j = j + 1
    i = i + 1
Run Code Online (Sandbox Code Playgroud)

我在这里做错了什么?

python list

2
推荐指数
2
解决办法
2万
查看次数

Ng-Model 未从输入标记更新对象(在带有键值管道的 ngFor 内)

我有一个 JSON 对象 - 其键是随机的 - 但在本例中我将使用IdandName作为示例:

{Id: "someID", Name: "some name"}

我试图显示该对象的每个键和值 - 但允许用户使用标签编辑值<input>

<div>
    <p *ngFor="let item of data | keyvalue">
        Key: {{item.key}}: <input [(ngModel)]="item.value">, {{item.value}}, {{data[item.key]}}</p>
</div>
Run Code Online (Sandbox Code Playgroud)

当用户对输入框进行更改时,屏幕上的输入会发生更改(即item.value) - 但数据对象不会更新(即data[item.key])。我可以使用ngModelChangeor(input)="onchange"($event, item.key)"[(ngModel)]="data[item.key]来更新数据对象;但是,这会导致输入框失去焦点,因此一次只能更改一个字符。

我相信问题出在键值管道的某个地方 - 因为我使用预定义的键没有问题,即。<input [(ngModel)]="data.id">- 但显然因为对象内的键是随机的,我不能使用它。

那么:有没有办法使用 ngModel 来更新对象内的值。或者有没有其他方法来更新对象的值并将其显示在屏幕上和输入框中?

key-value ngmodel angular

2
推荐指数
1
解决办法
1367
查看次数