反应儿童问题（打字稿）

Question

我将提供解决我的问题所需的所有代码，我对如何解决这个问题感到困惑我已经尝试了很多方法 none，但都有效。

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 组件的 children 中的组件类型。如果是这样 - 您可以使用 child 的 type 属性 - 这将 return 您键入相应的 child。

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

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

}

反应儿童问题（打字稿）

React children issue (typescript)

html

javascript

children

typescript

reactjs