显示基于类儿童在反应

问题描述：

<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>

显示基于类儿童在反应

我JobPostingControl组件具有显示基于所述的className的所述{this.props.children}是React.ReactNode类型的内部的屏幕。做这件事的最好方法是什么？最好在JobPostingControl内

您不能将类名作为状态传递给'className'并且作为到'JobPostingControl'的通道吗？ – Baruch

我遇到的问题是从{this.props.children}获取classNames，因为它的类型（React.ReactNode）很难适用于我 – csiscs

答

披露，我对React并不很有经验。

为了进一步提出我的意见，我会尝试在父组件中使用该类作为状态，并将其作为支持传递给JobPostingControl组件。

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> 
    ); 
    } 
}

答

首先，您可能需要重新考虑应用的组织结构。

如果你不能左右这个搞定了，你可以通过类似使你的孩子如下：

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

其中renderChildByClassName是一些函数，它的类名的空格分隔列表，并吐出JSX.Element 。请注意，此处需要演员表，因为ReactNode可以是ReactElement或ReactText。另外要特别注意你实际传递给你的零件。这个功能假定孩子一如既往地ReactElement并且他们总是有一个className道具。

显示基于类儿童在反应

相关推荐