标签: components

在软件工程中如何轻松地区分系统的子系统和组件？

给他们每个人一个详细的定义..

为了让我更清楚，让我们假设该系统是一个 StackOverflow 站点，它的组件和子系统是什么？

我正在尝试使用 aurelia 设计自定义元素，但我一遍又一遍地遇到同样的问题：浏览器加载组件的 html 文件，但不加载其兄弟 js 文件。我正在使用 es2016 入门套件 1.0.0-beta.1.2.0、jspm 0.16.15 和 npm 2.11.2

具体来说，考虑一个（非常）简单的例子。该组件（如预期）称为 test，其 html 和 js 文件分别如下：

测试.html：

<template>
<div>Name: ${name}</div>`
</template>`

测试.js

import {bindable} from 'aurelia-framework';
export class Test {
@bindable name = "";
}

从文件 app.html 调用该组件，并在 app.js 中设置属性名称的值，如下所示：

应用程序.html：

<template>
<require from="bootstrap/css/bootstrap.css"></require>
<require from="./test.html"></require>

<div class="page-host">
      <test name.bind="name"></test>
</div>
</template>

应用程序.js：

export class Welcome {
   name = 'My Test';
}

本地服务器运行后，输出很简单：

姓名：

预期输出为：名称：我的测试。

我注意到的是： 1）如果我转到 google chrome 开发工具中的源文件夹 dist，我会看到加载了以下文件：app.html；app.js 和 test.html。也就是说，test.js 根本不会出现在那里。2）如果编写test.html如下：

 <template bindable="name"> …

例如，我需要通过“this”获取组件对象，但“this”未定义

成分：

 <Menu onClick ={()=>this.MenuNavigate()}/>

原型函数：

React.Component.prototype.MenuNavigate = (e) => {
    // let url = e.item.props["data-url"]
    console.log(this)->undefined
}

如何得到“这个”？

我认为所有组件都扩展了 React.Component，所以我想在所有扩展了 React.Component 的组件中使用函数，因为我不需要再次编写

我创建了一个 Injectable，其中包含要使用的同一文件中的全局变量的声明。我能够让它在代码中工作。但在我的测试中，声明失败并出现未定义的错误。

declare var myGlobal;

@Injectable()
export class HttpService {
  constructor() {
    console.log(myGlobal);
  }
}

我正在测试一个组件，并且需要此服务作为组件测试的测试台中的提供者。

以下是它的调用方式：

    @Component({
    ...
    })
    export class AppComponent {
    constructor(_h: HttpService) {

    }
    ngOnInit(): void {
        this._h.fileUrl = window.location.href;
        this.getSettings(this._h.settingsSrc);
    }
}

以下是测试中服务的声明

beforeEach(async(() => {
    const settingsFile = 'json';
    TestBed.configureTestingModule({
      declarations: [
        AppComponent,
        MenubarComponent,
      ],
      imports: [
        HttpClientModule,
      ],
      providers: [
        HttpService
      ],
    }).compileComponents();}))


it('getSettings() tests', inject([HttpService], async(async (_h: HttpService) => {
     const cmp = new AppComponent(_h);
     await cmp.ngOnInit(); // this is where the …

我正在尝试创建一个单页 React 应用程序，一次安装某些组件。相反，所有组件都是一次性加载的。

我发现的有关安装组件的 StackOverflow 帖子是关于防止它们在更改时重新渲染的。我有 3 个部分，但我只希望其中一个部分出现在页面加载时。我希望计时器首先出现。当按下开始按钮时，我希望出现问题。最后，当计时器归零或用户按下提交按钮时，结果就会出现。各个组件都按我想要的方式工作，但我想隐藏它们直到它们被调用。仅供参考 - (selectedOption) 来自 React-Select 依赖项。

仓库： https: //github.com/irene-rojas/pixar-react

应用程序

import React, { Component } from 'react';
import './App.css';
import Timer from "./Timer";
import Questions from "./Questions/Questions.js";
import Results from "../src/Results";

class App extends Component {

state = {
    totalTrue: 0,
    totalFalse: 0,
}

componentDidMount() {
    return (
        <Timer />
    )
}

// submit button
handleFormSubmit = event => {
    event.preventDefault();
    console.log("submit button clicked");
        return (
            <Results />
        )
};

callbackHandlerFunction = ( …

Svelte 3：道具和子组件数组

我计划根据优秀的redblobgames文章在六角形瓷砖上编写棋盘游戏，并使用 Svelte 3 / Sapper 进行编码。

我的问题是关于子组件与父组件之间通过 props 的通信。我以前使用商店在旧版本的 Svelte 中这样做过，但我想没有它也可以做到这一点。

假设我有一块由 herxagons SVG 瓷砖组成的板。每块的形式为：

<script>
  // 3D coordinate system, see: http://redblobgames.org for details
  export let hex = { q:0, r:0, s: 0 }    
  export let center = { x:0, y: 0 }
  export let corners = []
  export let selected = false

  let points = corners.map (c => `${c.x.toFixed(0)},${c.y.toFixed(0)}`).join (' ')

  // changed by selection process (colors...)
  let inner_class = "inner_tile"

  const toggle_select = () …

我是 Angular2+ 的新手，阅读了很多包括 Angular 网站在内的材料。

从角度来看，对于父/子，我们可以使用 @Input() https://angular.io/guide/template-syntax#input-and-output-properties

但在我的代码中，我有两个不同的模块，每个模块都有一个组件。

如何将对象值从模块 1 的组件 1 传递到模块 2 的组件 2？

我尝试过 @Input() 但没有成功，并且从上面的 Argular 链接 @Input() 指的是父/子，这不是我的情况，好吧，根据我的理解，它不是:)

我可以通过路由、字符串和数值发送，但不能发送对象，这就是我需要不同方法的原因。

感谢您的任何评论阿德米尔

我有一个TEditDelphi VCL 表单应用程序（包含在一个TFrame实例中，如果重要的话）。在用户指示他们完成编辑后，通过单击表单上的其他地方，插入符号和焦点将保留在此控件上，直到我单击另一个控件，然后该控件获得焦点。但是，TEdit无论用户单击何处，我都希望失去焦点。我希望我可以使用ActiveControl := nil结束对所选控件的关注，但我不确定在哪里调用它。

我想要的是焦点离开所选控件而不必将其转移到另一个控件。我可以在表单的OnClick事件中结束焦点，但是如果用户在我的表单上选择任何其他控件（也包含在框架中），这将不起作用，因为表单的OnClick事件没有被触发。OnClick为表单上的每个附加项目提供单独的事件似乎既不优雅又乏味。

实现这种行为的全局解决方案是什么？

我有一个 Fire 类，uid如果用户未连接，则返回未定义，如果用户已连接，则返回字符串（他的 uid）。

有时我的渲染取决于此。

例如 ：

const [auth, setAuth] = useState<undefined|string>(Fire.shared.uid);

[...]

<Text>{(auth == undefined) ? "not authentificated" : "great")}</Text>

我们可以想象用户没有连接，因此文本将是not authentificated。现在他将在其他页面登录或注册，因此Fire类中的 uid 变量将发生变化。那么我应该如何改变状态值呢？

没有 useState 全局或类似的东西吗？

谢谢。

我对如何自定义 Material-UI 组件感到有点困惑。我已通读文档，一位团队成员说他们使用样式组件。我正在努力改变

• 将文本字段组件的边框颜色更改为 #cbb0b0
• 宽度为 200px
• 高度为 60 像素。

我已经尝试了几个小时的各种事情，但仍然没有弄清楚。我承认失败并寻求帮助！

这是我试图修改的内容：

import styled from 'styled-components';
import TextField from '@material-ui/core/TextField'; 

export default function InputBox () {
  return (
    <TextField 
      id="outlined-basic"
      variant="outlined"
      label="Default"
      defaultValue="Input Text"
    />
  )
}