如何将 props.children 放入 JSX 标签中答案

【问题标题】：How to put props.children in JSX tag如何将 props.children 放入 JSX 标签中
【发布时间】：2017-08-12 06:09:58
【问题描述】：

我有一个像这样的组件：

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 组件呈现传递而不是导入的内容）？

或者有什么解决办法？

【问题讨论】：

标签： reactjs higher-order-components

【解决方案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>
    )
  }
}

【讨论】：

如此简单，它为我指明了正确的方向。但是你的回答有一点语法错误。它应该是而不是 {this.props.children}。请编辑，以便我可以将此标记为询问答案。
不，{this.props.children} 是正确的：learn.co/lessons/react-this-props-children
你试过了吗？在我的项目中，{this.props.children} 没有显示任何内容，但很好。这也有效： const NewPerson = hoc(Person) 然后将放入
显然，{hoc(Person)} 就像 {Person} 而不是所以我们需要。
你对 NewPerson 组件是正确的。我批准了您的修改建议。