Question

我正在编写一个充满ReactJS组件的库，因此不应该使用Flux，因为它是一个库。

我有一个组件，ThemeProvider。

import React from 'react';

class OfficeUIThemeProvider extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return null;
    }
}

OfficeUIThemeProvider.propTypes = {
  theme: React.PropTypes.oneOf(['Office2016']).isRequired,
  color: React.PropTypes.oneOf(['Light-Blue', 'Blue', 'Green', 'Orange', 'Purple', 'Red']).isRequired
};

export default OfficeUIThemeProvider;

我在null方法中返回render()，因为此组件不应呈现任何内容。

然后我有一个简单的组件，一个按钮。

import React from 'react';

class OfficeUIButton extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return  <div className={"officeui-button"}>
                    <span className="{officeui-button-label}">{this.props.label}</span>
                </div>
    }
}

OfficeUIButton.propTypes = {
    label: React.PropTypes.string.isRequired,
};

export default OfficeUIButton;

现在，我希望按钮具有特定的类，具体取决于ThemeProvider中提供的值。

一个简单的解决方案是直接在我的OfficeUIButton ThemeProvider方法中呈现render()组件，但这不是一个有效的解决方案，因为我正在开发一个库并且不想要把事情结合起来。

使用此库的应用程序应该如下：

ReactDOM.render(
    <OfficeUIThemeProvider theme='Office2016' color='Light-Blue'>
        <OfficeUIButton label="To..." />
    </OfficeUIThemeProvider>,
    document.getElementById('app')
);

但是，自ThemeProvider返回null○ in it's render`方法以来，这不会呈现任何内容。

如何实现这一目标？

亲切的问候，

Answer 1

OfficeUIButton是OfficeUIThemeProvider的子组件，所以我想你应该尝试：

class OfficeUIThemeProvider extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                {this.props.children}
            </div>
        );
    }
}

在库

1 个答案: