Question

这不是“如何使这项工作”的问题，而是“这是最好的方式”。这是我的代码：

/**
 * React Static Boilerplate
 * https://github.com/koistya/react-static-boilerplate
 * Copyright (c) Konstantin Tarkus (@koistya) | MIT license
 */

 import React, { Component } from 'react';
 // import './InputWidgetText.scss';
 import ContentBlock from '../ContentBlock';


 var i = 0;
 var contentBlocks = [];

 var ContentContainer = React.createClass({

   addNewBlock: function(){
     i++;
     contentBlocks.push(<ContentBlock key={i} index={i}/>)
     this.forceUpdate();
   },
   render: function(){

     if (this.props.inputs) {
       contentBlocks = this.props.inputs.map(function(item, index){
        i++;
        return(<ContentBlock key={index} index={index} content={item} />)
     });

     }
     return (
       <div>
       {contentBlocks}
       <button onClick={this.addNewBlock}>+</button>
       </div>
       )

   }
 });


 export {ContentContainer as default};

问题是每次刷新时，props.input都没有传递给这个组件，并在我尝试映射undefined时抛出错误。因此，简单的解决方案是将地图流程置于if中，检查道具是否存在 - 这实际上是处理此问题的正确方法吗？我的数据通过父母的回流混合物传递。我觉得可能有更合适的方法来处理这个问题。感谢您的反馈！

Answer 1

我强烈建议您重构代码以取消文件变量i和contentBlocks。

contentBlocks变量似乎完全没必要，而您的i变量应该是州的一部分。在您了解情况的同时，请为i提供更有意义的名称，例如： blockCount。

getInitialState: function () {
  return {
    blockCount: 0
  };
},

然后定义您的点击事件处理程序以修改状态：

addNewBlock: function () {
  this.setState({
    blockCount: this.state.blockCount + 1
  });
},

每次调用setState()时，React都会触发重新渲染。您永远不需要致电forceUpdate()。

最后，您的render()函数应该在this.props和this.state上单独返回其内容。也就是说，对于任何给定的道具和状态，输出将是可预测的。将this.props和this.state视为render()函数的输入参数。这就是render()可以或需要知道的全部内容。

我不会尝试编写render()函数，因为我不确定您尝试使用此组件实现了什么。但是对于给定的this.props.input和this.state.blockCount（或者您选择用作道具和状态的任何内容），您应该确切地知道您输出的是什么。

我知道我没有直接回答你提出的问题，但我希望这能澄清一些React概念。

React JS Component“等待道具”

1 个答案: