小编Iho*_*avs的帖子

我想在Angular 4中的子组件中调用父方法(deletePhone).我该如何正确地做到这一点？

我的父组件看起来像:

export class ContactInfo implements OnInit {
    phoneForm: FormGroup;
    phones: Phone[];


    constructor(private fb: FormBuilder,
            private userService: UserService) {
    }

    ngOnInit() {
        this.userService.getDataPhones().subscribe(
            phones => {
                this.phones = phones;
            });

        this.phoneForm = this.fb.group({
            phone: ['', [Validators.pattern(PHONE_PATTERN)]]
        });
    }

    deletePhone(phone: Phone) {
        this.userService.deleteUserPhone(phone)
            .subscribe(res => {
                let index = this.phones.indexOf(phone);
                if (index > -1) {
                    this.phones.splice(index, 1);
                }
        });
    }
}

我遇到了故事书库+ ReactJS 的问题。我需要在故事书中的品牌图像下显示自定义文本。故事书库中有什么选项可以实现它吗？

我们是否能够以某种方式获取侧边栏实例或传递自定义渲染器函数？

我正在尝试将 eslint 设置为 TS react 项目，但遇到错误：

> eslint .


Oops! Something went wrong! :(

ESLint: 6.8.0.

ESLint couldn't find the config "dev" to extend from. Please check that the name of the config is correct.

The config "dev" was referenced from the config file in "C:\Users\User\Desktop\priority-style-react\example\node_modules\@csstools\convert-colors\package.json".

If you still have problems, please stop by https://gitter.im/eslint/eslint to chat with the team.

我的 package.json 看起来像：

{
  "name": "######",
  "version": "####",
  "description": "none",
  "author": "iLavs",
  "license": "MIT",
  "repository": "#####",
  "main": "dist/index.js",
  "module": "dist/index.es.js", …

我尝试使用 MDX 标记为我的故事书构建实时文档。当我运行故事书时，出现以下错误：

模块构建失败（来自 ./node_modules/babel-loader/lib/index.js）：

SyntaxError: C:/Users/User/Desktop/priority-style-react/src/stories/Button1.stories.mdx: Unexpected token (12:9)

  10 | const makeShortcode = name => function MDXDefaultShortcode(props) {
  11 |   console.warn("Component " + name + " was not imported, exported, or provided by MDXProvider as global scope")
> 12 |   return <div {...props}/>
     |          ^
  13 | };
  14 | const Preview = makeShortcode("Preview");
  15 | const layoutProps = {

我要加载的 webpack 配置.mdx是：

config.module.rules.push({
    test: /\.mdx?$/,
    use: [{loader: "babel-loader"}, {loader: '@mdx-js/loader'}],
    exclude: /node_modules/,
    include: [/src/]
}); …

我尝试设置我的笑话运行器以与 scss@impport语句（在我的 React 应用程序的 css 模块内）正常工作。但不幸的是，每次运行测试脚本时都会出现错误。我尝试了 StackOverflow 类似票证中的不同解决方案，但它对我没有帮助。

我的错误示​​例：

我的笑话.config.js：

module.exports = {
transform: {
    "^.+\\.(jsx?|tsx?)$": "<rootDir>/.jest/transform.ts",
},
testURL: 'http://localhost:6006/',
testRegex: "((\\.|/)(test|spec))\\.(jsx?|tsx?)$",
preset: 'jest-puppeteer',
moduleFileExtensions: [
    "scss",
    "ts",
    "tsx",
    "js",
    "jsx",
    "json",
    "node"
],
moduleDirectories: ["node_modules", "src"],
moduleNameMapper: {
    '\\.(jpg | ico | jpeg | png | gif | eot | otf | webp | svg | ttf | woff | woff2 | mp4 | webm | wav | mp3 | m4a | aac | oga)$ ': '<rootDir>/__mocks__/fileMock.js', …

伙计我需要一些Angular 4反应形式的帮助.我有嵌套的表单组也可以正常工作,除了验证.但是当我尝试在我的html标记中添加一些处理验证时,我的应用程序崩溃了.

我的组件代码如下:

createForm() {
    let options: any = {};

    for (let option of this.annoucementOptions) {
        options[option.title] = new FormControl(false);
    }

    let optionsFormGroup: FormGroup = new FormGroup(options);

    this.annoucementForm = this.fb.group({
        address: this.fb.group({
            country: ['', [Validators.maxLength(50)]],
            state: ['', [Validators.maxLength(50)]],
            city: ['', [Validators.required, Validators.maxLength(50)]],
            street: ['', [Validators.required, Validators.maxLength(50)]],
            apartment: ['', [Validators.required, Validators.maxLength(50)]],
        }),
        description: this.fb.group({
            title: ['', [Validators.required, Validators.maxLength(80)]],
            shortDescription: [''],
            livingPlaces: [''],
            room: [''],
            options: optionsFormGroup
        }),
        priceBlock: this.fb.group({
            price: ['', [Validators.required, Validators.maxLength(80)]],
            type: ['', [Validators.required, Validators.maxLength(80)]],
        }),
    });
}

这是我的模板代码: …