ライブラリ内の他のReactコンポーネントを取得する

Question

Fluxは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; 

このコンポーネントが何をレンダリングするべきではありませんので、私はrender()方法でnullを返します。

次に、私は単純なコンポーネント、ボタンを持っています。

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で提供される値に基づいて、特定のクラスを持っていると思います。

ThemeProviderrender()メソッドでOfficeUIButtonコンポーネントを直接レンダリングするのが簡単な解決策ですが、ライブラリを開発していて、結合したくないので、これは有効な解決策ではありません。

として動作するはずです。このライブラリを使用したアプリケーション：

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