顯示基於類兒童在反應

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

來源

2017-08-09 csiscs

您不能將類名作爲狀態傳遞給'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> 
    ); 
    } 
}

來源

2017-08-09 18:16:28 Baruch

首先，您可能需要重新考慮應用的組織結構。

如果你不能左右這個搞定了，你可以通過類似使你的孩子如下：

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道具。

來源

2017-08-09 18:17:15

顯示基於類兒童在反應

回答

相關問題