Reactjs 高阶组件问题：必须返回有效的React元素（或null）

为什么higherOrderComponent1函数不起作用而higherOrderComponent2按预期工作？根据文档，我似乎没有做错什么，但由于它不起作用，我一定是做错了什么：-

您可以在此处找到沙盒版本：

从“React”导入React，{Component}； 从'react dom'导入{render}； 常量higherOrderComponent1=name=>{ 返回类扩展组件{ 渲染{ {`Hi${name}`} } } }; 常量higherOrderComponent2=名称=> {`Hi${name}`} ; 常量应用==> 高级零件1彼得 ; render，document.getElementById'root'；

---

好的，你对如何使用HOC有点不了解。这里有一个简单的例子，我将解释

function giveColor( WrappedComponent, color ) {
    return class extends Component {    
        componentDidMount() {
            this.wrapperEl.children[ 0 ].style.color = color;
        }

        render() {
            console.log(this.props)
            return (
                <div ref={ ( el ) => this.wrapperEl = el }>
                    <WrappedComponent { ...this.props } />
                </div>
            );
        }
    }
}

const PrintName = ({ name }) => (
    <div>{ name }</div>
);

const PrintRedName = giveColor( PrintName, "#ff0000" );

---

一定要回来。。。在高阶组件1中。大括号使return语句成为必需。不幸的是，这似乎不起作用：很好的捕获，但不幸的是，这似乎不起作用：我不认为高阶组件有什么问题，但更重要的是，我无法使函数返回正确的react元素。这个块呈现得很好：constmyfunction1==>{returnhello}；但事实并非如此：constmyfunction2==>{返回类扩展组件{}；如果我添加渲染方法，它仍然无法工作。非常感谢提供详细信息。给可能的其他读者的一些评论：*来自函数式编程，我不得不习惯这样一个事实，即一个函数编写的const doSomething==>正如预期的那样工作，但无论何时使用{…}，都需要使用一个return语句。*高阶函数不能直接在代码中使用，例如在渲染方法{connect..}中。这仍然让我有点困惑。这里有一些工作代码：只是最后一个问题，也许有人可以澄清一些事情，请参阅以下代码：const ComponentA={name}=>{name}；常量组件B=wrapComponentComponentA；const App=>/////wrapComponent///wrapComponentComponentA//{wrapComponent}//{wrapComponentComponentA}对我来说至少从第二行开始，至少应该有一个也可以工作。React中是否存在只有第一行有效的魔力？因此，HoC实际上是一个函数，它接受一个组件并返回一个新组件，该组件将提供给HoC函数的组件包装起来，为其提供额外的功能。

const wrapComponent = (WrappedComponent) =>
  class extends Component {
    render() {
      return (
        <div>
          I wrapped:
          <WrappedComponent {...this.props} />
        </div>
      )
    }
  }

const ComponentA = ({name}) => <div><b>{name}</b></div>;
const ComponentB = wrapComponent(ComponentA);

// You had...
/*

No need to wrap a component wrapping itself, but the problem here is,
You're nesting evalutions by doing { ...code } inside
() => ( single evaluation )

const App = () => (
  { wrapComponent(ComponentB) }
)
*/


const App = () => (
  <ComponentB name="My name" />
)

render(<App />, document.getElementById('root'));