在 React 中返回并渲染一个 div

Question

我试图从反应函数中动态返回一个div。我在组件渲染函数中调用一个函数直接渲染出来，但它没有渲染出来。我确信这是代码中的一个简单错误，但我无法发现它。

\n\n

代码：

\n\n

import React, { Component } from \'react\'\n\nimport ProgressBar from \'./ProgressBar\'\n\nrequire(\'styles/_servicesPage/priceCalc.css\')\n\nexport default class PriceCalculator extends Component {\n\n  componentWillMount() {\n    this.state = {\n      arr: []\n    }\n  }\n\n  minimizeDiv() {\n    this.props.toggleDiv(false)\n  }\n\n\n  returnDiv(){\n    return\n      <div>\n        <p>\n          Printing out text!\n        </p>\n      </div>\n  }\n\n  render() {\n    var styleVar = {\n      backgroundImage: \'url(assets/images/services/pricecalc_blue_bg.svg)\',\n      backgroundPosition: \'right center\'\n    }\n\n    return (\n      <div className="service-form" id="priceCalc" style={styleVar}>\n\n        <div>\n          <h1>Priskalkyl f\xc3\xb6r badrum</h1>\n          <p>\n            V\xc3\xa4lkommen att fylla i formul\xc3\xa4ret,\n            s\xc3\xa5 \xc3\xa4r du ett steg n\xc3\xa4rmare dina dr\xc3\xb6mmars badrum.\n          </p>\n        </div>\n\n        {this.returnDiv}\n\n        <div onClick={this.minimizeDiv.bind(this)} className="minimizeBorder">\n          <img src="assets/arrows/minimizeArrow.svg"/>\n          <p>Minimera</p>\n          <img src="assets/arrows/minimizeArrow.svg"/>\n        </div>\n\n      </div>\n    )\n  }\n}\n

\n

Answer 1

当您通过函数渲染 div 时，div 的意图和位置很重要。

renderDiv() {
  return (<div>
          </div>)
}

有效但无效

renderDiv() {
  return 
      (<div>
      </div>)
}