Javascript 在react中基于子对象中的类显示

我的JobPostingControl组件必须根据{this.props.children}中的类名显示一个屏幕，该类名属于React.ReactNode类型。做这件事最好的方法是什么？最好是在JobPostingControl

披露范围内，我对React不是很有经验

为了进一步说明，我将尝试将该类用作父组件中的状态，并将其作为道具传递给JobPostingControl组件

<div className="optimise-page">
<Row>
    <Col sm={7} >
        <div className="optimise-panel">
            {this.props.children}
        </div>
    </Col>

    <Col sm={5}>
        <div className="preview-panel">
            <JobPostingControl jobDescription={jobPosting.data} isLoading={search.previewRequestState.isBusy || previewByTemplate.isBusy} />
        </div>
    </Col>
</Row>

---

首先，你可能想重新考虑你的应用程序的组织

如果无法解决此问题，可以通过以下方式渲染您的孩子：

class ParentComponent extends React.Component {
  constructor() {
    super(...args);
    this.state = {
      className: 'foo'
    };
  }

  render () {
    return (
     <div className={this.state.className}>
      <JobPostingControl setPropName={this.state.className} />
     </div>
    );
  }
}

---

其中renderChildByClassName是一个函数，它接受一个以空格分隔的类名列表并输出JSX.Element。请注意，此处需要强制转换，因为ReactNode可以是ReactElement或ReactText。另外，还要特别注意实际传递给JobPostingControl组件的内容。此函数假定子元素始终是ReactElement，并且它们始终有一个类名prop。

您不能将类名作为状态传递给类名，并作为prop传递给JobPostingControl吗？我遇到的问题是从{This.props.children}获取类名，因为它的类型React.ReactNode对我来说很难使用

private renderChildrenByClassName(): JSX.Element[] {
    return React.Children.forEach(this.props.children, (child) => {
        return this.renderChildByClassName((child as React.ReactElement<any>).props.className);
    }
}