标签: components

我有4个组件。我只想一次渲染一个。我的导航中有按钮，当我单击一个按钮时，它应该呈现该组件，然后隐藏其他 3 个（即将它们设置为 null）

这很容易使用 2 个组件。我只有一个像这样的切换功能：

toggle() {
  this.setState(prevState => ({
    showTable: !prevState.showTable
  }));
}

我已经尝试在我有这个的地方调整这个：

showComponent(component) {
  this.setState(prevState => ({
    [component]: !prevState.component
  }));
}

当我单击相应的按钮时，这当前显示了组件。但是，一旦再次单击相同的按钮，它就不会隐藏组件。

我的所有按钮都像这样调用这个方法：

<button onClick={() => this.showComponent('AddPlayer')}>Add</button>
<button onClick={() => this.showComponent('ShowPlayers')}>Players</button>
<button onClick={() => this.showComponent()}>Table</button>
<button onClick={() => this.showComponent()}>Matches</button>

有任何想法吗？

编辑：

{this.state.AddPlayer ?
              <div className="add-container">
                <AddPlayer />
              </div>
              :
              null
            }
            {this.state.ShowPlayers ?
              <div className="players-container">
                <Players />
              </div>
              :
              null
            }

我想知道是否有一种方法可以计算组件被调用的次数，但是是从组件内部而不是从父组件调用的。

在这种情况下，我需要确切地知道同一个组件以后要做一些事情多少次，这可能吗？

这可能是一个愚蠢的问题，但我不明白组件宽度是如何工作的。

当我做 ：

    render() {
        return (
          <View style={{ height: 100, backgroundColor: 'yellow' }}></View>
        )
    }

我的黄色视图是可见的，需要 100 "height" 和full width。为什么 ？我从来没有设置宽度，为什么宽度不等于 0 ？

我正在 React 中创建一个 Table 组件。我正在查看一些 Table 组件，它们创建了一个列数组以传递给 Table。在这个列数组中，您可以放置​​一个函数来在 tbody 的每一行内渲染一个组件。

Ant Design 的第一个例子（https://ant.design/components/table/）：

const columns = [{
  title: 'Name',
  dataIndex: 'name',
  key: 'name'
}, {
  title: 'Action',
  key: 'action',
  render: (text, record) => ( <<-- THIS FUNCTION. IT RECEIVES THE ROW RECORD AS A PARAM TOO
    <span>
      This gonna be rendered in each row of the table
    </span>
  ),
}];  

我试图找出一种创建这种机制的好方法，以在表格主体的每一行中呈现一列。

有学习的好榜样吗？我正在尝试阅读 NPM 中某些组件中的源代码......但很难理解。

感谢开发者！

我正在尝试制作一个调用自身的自定义组件。我不断收到错误消息

Unknown custom element: <TestRec> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

我已经包含了一个名称选项，如下所示，但这并不能解决问题。

知道它可能是什么吗？

<template>
  <div>
        <h4>I am a component that can call itself below</h4>

        <v-select :items="['TestRec', 'normal']" v-model="comp"></v-select>

        <hr />
        <component :is="comp"></component>
  </div>
</template>

<script>
import TestRec from "./TestRec";
export default {
    name: 'New-Test-Rec', //Name tried 'Test-Rec' too. Same result
    components: {
        TestRec
    },
    data(){
        return {
            comp: null
        }
    }
}
</script>

我正在尝试在 Ionic3 中创建一个自定义菜单，当用户单击那个汉堡包图标时，它需要向元素添加#menu一个open类，我正在尝试使用ngClass

问题是这个图标在我的菜单组件之外，这个图标在我的页面中 home-user

打开后，我的菜单看起来像下一张图片，所以我不能使用 ionic 的默认菜单

所以我的组件menu有一个名为 的变量opened，这个变量决定了我的菜单元素的类

菜单.ts

@Component({
    selector: 'menu',
    templateUrl: 'menu.html',
})

export class MenuComponent {

    opened: boolean = true;

    constructor() {
    }

    toggleMenu() {
        this.opened = !this.opened;
    }
}

所以当我触发时toggleMenu()我改变了opened价值

我在我的组件页面中触发此功能并正常工作

菜单.html

<div id="menu" [ngClass]="opened ? 'open' : ''">
    <a class="menu-item" href="#">Sair</a>
    <ion-icon (click)="toggleMenu()" id="toggleMenu" name="close"></ion-icon>
</div>

那么，我的问题是什么？

toggleMenu()例如，我如何从我的home-user.html页面调用它，该页面也有一个按钮，并且该按钮应该更改opened变量的值

我试过什么

我试图在我的menu.module.ts中创建一个函数来触发该toggleMenu()函数menu.ts …

import React, { Component } from "react";
export default class Logo extends Component {
    render() {
        return (
        <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 615 615"><defs><style>.cls-1{stroke:#fff;stroke-miterlimit:10;stroke-width:4px;}.cls-2{fill:#f2f2f2;}</style></defs><title>vision-octo-bw</title><g id="octo-drop"><polygon class="cls-1" points="450.68 546.99 185.11 547 52.32 317.01 185.09 87.01 450.67 87 583.47 316.99 450.68 546.99"/><path class="cls-2" d="M318.87,154c-61.78,91.83-64.25,97.12-77,115-24.86,35-68,112.88-6.57,174.31s136.77,33.83,162.92,3.83c28.13-32.27,60-82.76-2.16-176.17C331.37,173.6,325.2,164.31,318.87,154Z"/></g></svg> 
        );
    }
}

我在反应组件中有以下回报：

render() {
     return(
            <div>
                <div className = "category-name">
                    {categories.map(category =>
                        <p>{category.name}</p>
                    )}
                </div>
                <div className = "category-name">
                    {categories.map(category =>
                        <Playlist categoryid={category.id}/>
                    )}
                </div>
            </div>
        );
}

这是显示类别名称，然后通过名称数组从播放列表组件获取描述。有人能告诉我如何返回每个名称下的播放列表吗？我尝试了以下操作，但它不起作用：

render() {
  return(
            <div>
                <div className = "category-name">
                    {categories.map(category =>{
                        return (<p>{category.name}</p>,
                            <Playlist categoryid={category.id}/>)
                        }     
                    )}
                </div>
            </div>
        );
}

最近，我在组件中遇到了以下属性声明TDBNavigator：

property Enabled;
[Default(False)]     <--------------------
property Flat: Boolean read FFlat write SetFlat default False;

该指令[Default(False)]是什么意思？它的主要目的是什么？

我正在开发一些组件 - 自定义按钮。我安装了它，但在设计时自定义发布的属性重置为零。首先，我在谈论颜色 - 它重置为clBlack（或clBtnFace用于Color财产）。Caption重置为空字符串。我的意思是当我在设计时放置组件以形成表单时，对象检查器中的所有自定义属性都重置为零（颜色clBlack等）。我可以手动更改它，但为什么我在代码中设置的默认值不起作用？问题仅在设计时。当我在运行时创建组件时，它工作正常。这是代码（以Color属性为例）。

基类

TpfCustomButton = class(TCustomControl)
...
published
...
  property Color;
...
end;

主要代码

TpfCustomColoredButton = class(TpfCustomButton)
...
public
  constructor Create(AOwner: TComponent);
...
end;

constructor TpfCustomColoredButton.Create(AOwner: TComponent);
begin
  inherited Create(AOwner);

  Color := $00E1E1E1;//Look at this: setting Color
  ...
end;

组件代码

TpfColoredButton = class(TpfCustomColoredButton)
published
  ...
  property Action;
  property Align;
  //And some other standard properties
end;

procedure Register;

implementation

procedure Register;
begin
  RegisterComponents('PF Components', [TpfColoredButton]);
end; …