1

我有一个像这样的组件：

class Person extends React.Component {
  render() {
    const { language } = this.props;
    return (
      <div>
        I speak {language}
      </div>
    );
  }
}

还有一个像这样的高阶组件：

export default (BaseComponent) => 
  class extends React.Component {
    render() {
      return <BaseComponent language="English" />;
    }
  }

我用过它们：

class PersonList extends Component {
  render() {
    const NewPerson = hoc(Person)
    return <NewPerson />;
  }
}

非常好，它输出了我想要的

I speak English

但是，如果我希望 PersonList 组件呈现从其父级传递的内容而不是导入的内容，如下所示：

render(
  <PersonList>
    <Person />
  </PersonList>,
  document.getElementById('app')
)

现在，

const NewPerson = hoc(Person)

引发错误。

我知道我可以像这样修复 HOC

return <div>{React.cloneElement(BaseComponent, { language: "English" })}</div>

但这是一个重大变化，我不想这样做。

无论如何我可以在不破坏我的 HOC 的情况下归档我的目标（HOC 组件呈现传递而不是导入的东西）？

或者有什么解决办法？

4

1 回答 1

1

您可以通过以下方式添加由高阶组件创建的 Person 组件：

const NewPerson = hoc(Person)
render(
  <PersonList>
    <NewPerson />
  </PersonList>,
  document.getElementById('app')
)

添加{this.props.children}到您的 PersonList 的渲染功能：

class PersonList extends React.Component {
  render() {
    return(
      <div>
          {this.props.children}
      </div>
    )
  }
}
于 2017-08-12T07:03:41.293 回答