javascript - React child 问题( typescript )

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。如果有必要，我可以提供每个代码，但我能找到的主要识别因素是 Prop :

interface JobBuilderModelProps {
    pageState: BuilderState;    
}

<小时/>

interface JobBuilderSearchProps {
    pageState: SearchState;
}

还有容器 div 的类名:

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

<小时/>

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

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

Answer 1

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

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

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

}