Question

相邻的JSX元素必须用父标记括起来，这导致我在实现Fela时遇到一些问题。我是所有这些技术的新手，并努力确保我将它们应用于最佳实践。假设我有一个 Page 组件和一个fela组件 - pageWrapperCss ：

const PageWrapperCss = createComponent(
    (props) => (
        {   
            paddingTop: props.navbarHeight + 'px',
            display: 'flex',
            flexDirection: 'column',
            alignContent: 'stretch',
            flexGrow: 1,
            flexShrink: 0,
        }
    ), 'div'
);

const Page = ({view}, {cssVars}) => {
    // some logic here which may set TargetView = Dashboard component
    return (        
        <PageWrapperCss {...cssVars} >
            <TargetView />
        </PageWrapperCss>
    );
};

export default Page;

TargetView组件由部分组成，它们的css也由Fela组成。以下是父节点包裹的部分 - div 。这就是问题所在。现在，我的父组件 PageWrapperCss 之间有一个 div 节点 - 它生成一个带有附加classNames的 div 节点。

class Dashboard extends Component {
    render() {
        let { cssVars } = this.context;
        return (
        <div>
            <SectionWrapperCss {...cssVars}>
                <HeaderSection>
            </SectionWrapperCss>
            <SectionWrapperCss {...cssVars}>
                <BodySection />
            </SectionWrapperCss>
            <SectionWrapperCss sectionFlex="1" {...cssVars}>
                <AnotherSection />
            </SectionWrapperCss>
        </div>
        );  
    }       
}

之前我在 PageWrapperCss 组件中有 Dashboard 组件，如下所示，其工作正常;但是我希望将Fela css逻辑保留在与其相关的组件中，这样我就不必在每个目标视图中生成 PageWrapperCss 组件。

class Dashboard extends Component {
    render() {
        let { cssVars } = this.context;
        return (
        <PageWrapperCss>
            // sections
        </PageWrapperCss>
        );  
    }       
}

其他人如何处理此事？ Fela相当灵活，我可以在 Page 组件中渲染css ，并通过props将className持久化到所有视图，并将它们添加到父节点。

class Dashboard extends Component {
    render() {
        let { cssVars } = this.context;
        return (
        <div className={this.props.pageCss} >
            // sections
        </div>
        );  
    }       
}

谢谢！

与Fela相关的相邻JSX元素和与父组件的React问题

0 个答案: