如何将 props.children 放在 JSX 标签中

Question

我有这样一个组件：

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 组件呈现传递下来而不是导入的东西）吗？

或者有任何变通办法吗？

Answer 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>
    )
  }
}

如何将 props.children 放在 JSX 标签中

How to put props.children in JSX tag

reactjs

higher-order-components