Question

我正在尝试动态生成组件并将组件呈现为函数的返回。

import React, { Component } from 'react';
import HelloWorld from './helloWorld';

export default class BaseComponent extends Component {
  constructor(props) {
  super(props)
  this.getFields = this.getFields.bind(this)
}

getFields() {
  let temp = { hi: 'Hello', world: 'World!' }
  const test = temp.map(function(val, i) {
                return <HelloWorld key={i} val={val} />
              })
  return test
}

render() {
    return (
        <div className="container">
                {this.getFields}
        </div>
   );
}
}

但是除非我在render方法中使用{this.getFields（）}，否则不会调用此函数。为什么我不能使用{this.getFields}，因为它绑定在构造函数中，因此应该呈现值。我错过了什么？

Answer 1

您需要从render函数调用该方法以使用返回的值而不分配它，因此您需要{this.getFields()}

render() {
    return (
        <div className="container">
                {this.getFields()}
        </div>
   );
}

Answer 2

您需要调用该函数：

{this.getFields()}

除非直接调用，否则不会调用React函数

2 个答案: