Question

我有一个更高阶的组件，它提供完整的网站布局，包括侧边栏。此侧边栏包含一些静态元素（例如徽标，主页按钮，印记和免责声明）以及由组合组件提供的一些动态内容。

const HtmlSkeleton = (ComposedComponent) => {
    class Wrapper extends Component {
        [...]
        render() {
            return (
                <div>
                    <Sidebar content={ComposedComponent.getSidebarContent()} />
                    <Header />
                    <Content>
                        <ComposedComponent {...this.props} />
                    </Content>
                    </Footer />
                </div>
            )
        }
    }

    return connect(...)(Wrapper)
}

然后我有一些视图/容器，将由该HOC组成：

class View extends Component {
     static getSidebarContent = () => {
         // how to access someFunction?!?

         return [...some stuff depending on props. How do I have access?]
     }
     constructor(props) {
          [....]
     }
     [...]
     someFunction = () => { [....] }
     render() {
        this.someFunction()
        [...]
    }
}
export default connect(....)(HtmlSkeleton(View))

（连接来自react-redux，但在那种情况下并不重要）

或者是否还有其他可能将布局保留在某种组件中，我看不到？你在哪里保留基本的HTML？我正在使用react-router，react-redux和redux-saga。

Answer 1

您可以将道具直接传递给getSidebarContent：

<Sidebar content={ComposedComponent.getSidebarContent(this.props)} />

并在你的函数中检索它们：

class View extends Component {
     static getSidebarContent = (props) => {
         return ...
     }
     [...]
}

ReactJS：在组合组件

1 个答案: