Question

以下是一个简单的index.jsx 在底部，在Workspace的render（）方法中，{C}呈现。

在Workspace的渲染方法C中，子组件正在渲染，而包装器则不是。 console.log表明...... React.isValidElement（W）=＆gt;返回FALSE。我在函数wrappedHOC（WrappedComponent）中缺少什么 - 它无法返回有效的React元素？我删除了所有功能，除了传递包装组件所拥有的SAME道具。

import React from "react";
import ReactDOM from "react-dom";

class Kid extends React.Component {
  constructor(props){
    super(props);
    this.state = {};
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(e) {
    console.log('clicked');
  }
  render() {
    return (
      <div onClick={this.handleClick}>
        <span>{`I, ${this.props.name}, ${this.props.power}`}</span><br/>
      </div>
    )
  }
}

function wrapperHOC(WrappedComponent) {
  return class extends React.Component {
    constructor(props){
      super(props);
      this.state = {};
    }
    render() {
      return <WrappedComponent {...this.props} />
    }
  }
}

class Workspace extends React.Component {
  render() {
    let C = <Kid name={'Wonder Woman'} power={'kill baddies'} />
    let W = wrapperHOC(C);
    if (React.isValidElement(C)) { // is TRUE
      console.log("Child is valid React Component");
    }
    if (React.isValidElement(W)) { // is FALSE
      console.log("Wrapper is also valid React Component");
    } else {
      console.log("Wrapper is NOT valid React Component");
    }
    return (
      <div>
        <span> {C} </span> 
        <hr/>
        <span> {W} </span>
      </div>
    );
  }
}

ReactDOM.render(<Workspace />, document.querySelector("#container"));

请指点什么？

Answer 1

W不是有效的React元素。

什么是有效的React元素是<W />。

您可以将React.isValidElement(W)更改为React.isValidElement(<W />)。

进行检查

另外，我相信你不应该在你的渲染方法上创建HOC。

React HOC简单用例..函数不返回有效的ReactElement（React.isValidElement（H））=== false

1 个答案: