反应儿童问题（打字稿）

Question

我将提供我的问题所需的所有代码，我不知道如何解决这个问题我尝试了很多方法，但都没有奏效。

export class JobBuilderOptimise extends React.Component<JobBuilderOptimiseProps & JobBuilderOptimiseDispatch> {
    render() {
        const {
            jobPosting,
            search,
            previewByTemplate
        } = this.props.pageState;


        return (

            <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} leftSide={this.props.children}/>
                        </div>
                    </Col>
                </Row>
            </div>
        );
    }

this.props.children 显示 JobBuilderModel.tsx 或 JobBuilderSearch.tsx。如有必要，我可以为每个人提供代码，但我能找到的主要识别因素是道具：

interface JobBuilderModelProps {
    pageState: BuilderState;    
}

---

interface JobBuilderSearchProps {
    pageState: SearchState;
}

还有容器 div 的类名：

<div className="search-job-section">
...
</div>

---

<div className="model-job-section">
...
</div>

我提供这些的原因是因为我必须弄清楚将显示两个反应组件中的哪一个（并且我一直试图以任何方式区分这两者，以便确定实际显示的是哪个，但也许不是正确的方法），并且基于此，必须将字符串传递到页面上的 JobPostingControl 控件。如果需要更多详细信息，请告诉我。

Answer 1

如果我理解正确，问题是如何找出 JobBuilderOptimise 组件的子组件中的组件类型。如果是这样 - 您可以使用孩子的 type 属性 - 这将返回您相应孩子的类型。

然后你可以测试看看里面有什么类似的代码：

if((child.type as any).prototype instanceof JobBuilderModel)
{

}