Question

在ReactJS中，我试图做一些非常简单的事情。我有一个我创建的课程：

//SomeName.js
class SomeName {
    constructor(name){
        this.name = name;
    }
}

在我的React.component中我有：

//Index.js
import React from 'react'
import SomeName from './parts/SomeName'

class Index extends React.Component{

    constructor(){
        super();
        let newName = new SomeName("John Doe");
        this.getName = this.getName.bind(this);
    }

    getName(){
        return newName;
    }

    render() {
        return (
            <div className="pages-container">

                Hello {this.getName}

            </div>
        )
    }
};

但是，我在我的Index.js构造函数中粘贴了一个调试器，我没有引用SomeName。我查看过的每个参考文献都表明它是以这种方式完成的（不过在ReactJS中），我没有问题导入我制作的组件，只有当我试图返回此组件时才会这样做值。我觉得有一些非常简单的东西我不知道，我只是不知道是什么。有人可以帮忙吗？

Answer 1

1）您将newName定义为局部变量。要使其在getName中可访问，您应将其分配到this：

constructor() {
    super();
    this.newName = new SomeName("John Doe"); // fixed here
    this.getName = this.getName.bind(this);
}

getName(){
    return this.newName; // and here
}

2）您应该使用getName方法调用render。否则你将得到函数，而不是结果：

render() {
    return (
        <div className="pages-container">

            Hello {this.getName()} //do not forget parentheses

        </div>
    )
}

导入类

1 个答案: