javascript - 警告 : Functions are not valid as a React child. ReactJS

Question

我的“Board”类(class)存在问题。我一直在到处寻找解决方案，但似乎无法解决。请告诉我我做错了什么。

错误消息是:警告:函数作为 React 子项无效。如果您返回一个组件而不是从渲染中返回，则可能会发生这种情况。或者也许您打算调用此函数而不是返回它

class Test extends Component {
  state = {
    editing: false
  };

  edit = () => {
    this.setState({ editing: true });
  };

  remove() {
    alert("removing");
  }
  save = () => {
    var val = this.refs.editedtext.value;
    console.log(val);
    this.setState({ editing: false });
  };

  RenderNormal = () => {
    return (
      <div className="commentContainer">
        <div className="commentText" style={{ fontSize: "100px" }}>
          {this.props.children}
        </div>
        <button onClick={this.edit} className="btn btn-primary">
          Edit
        </button>
        <button onClick={this.remove} className="btn btn-danger">
          Delete
        </button>
      </div>
    );
  };
  RenderForm = () => {
    return (
      <div className="commentContainer">
        <textarea
          ref="editedtext"
          defaultValue={this.props.children}
        ></textarea>
        <button onClick={this.save} className="btn btn-danger">
          Save
        </button>
      </div>
    );
  };
  render() {
    if (this.state.editing) {
      return this.RenderForm;
    } else return this.RenderNormal;
  }
}

**class Board extends Component {
  state = {
    comments: ["Comment1", "Comment2", "Comment3"]
  };
  render = () => {
    return (
      <div>
        {
          (this.state.comments.map = (text, i) => {
            return <Test key={i}>{text}</Test>;
          })
        }
      </div>
    );
  };
}**

export { Test, Board };

Index.JS:
ReactDOM.render(
  <div>
    <Board />
  </div>,
  document.getElementById("app")
);

Answer 1

  render() {
    if (this.state.editing) {
      return this.RenderForm;
    } else return this.RenderNormal;
  }

在您的 render 函数中，您将返回两个函数之一，而不是调用它们的结果。如果您只是将括号添加到 RenderForm 和 RenderNormal 的末尾(即 return this.RenderForm(); )它应该可以正常工作，如下所示您将返回调用该函数的结果。