React和Redux - 无法在另一个组件中呈现一个组件

Question

我有一个组件TrialForm.js，我想在另一个名为TimelineNodeEditorDrawer.js的组件中呈现它。我认为问题可能是我在两个文件中使用MuiThemeProvider，而材质UI可能不允许这样做。

TrialForm.js：

class TrialForm extends React.Component {
constructor(props) {
    super(props);
}
render(){

...(some code)

var form = <div><SelectField
        value={this.props.pluginType}
        floatingLabelText="Plugin Type"
        maxHeight={300}
        style={pluginStyle}
        onChange={(event, key) => this.props.onChange(plugins[key])} >
        {pluginItems}
        </SelectField>
        {pluginParameters}
        </div>
    } else {
        var form = <div></div>;
    }
    return(
        <MuiThemeProvider>
        {form}
        </MuiThemeProvider>
        )
   }
}

export default TrialForm;

TimelineNodeEditorDrawer.js：

export default class TimelineNodeEditorDrawer extends React.Component {
constructor(props) {
    super(props);
}

render() {
    return (
        <MuiThemeProvider>  

...(some code)

<div className="TimelineNode-Editor-Container"
                style={{height: '100%', width: '100%'}}>
                {(this.props.open) ? 
                <div className="TimelineNode-Editor-Content">
                    <div style={{display: 'flex'}}>
                        <IconButton 
                        disableTouchRipple={true}
                        hoveredStyle={{backgroundColor:
                        CloseBackHighlightColor}}
                        onTouchTap=
                        {this.props.closeTimelineEditorCallback}
                        >{(this.props.open) ? 
                        <CloseDrawer hoverColor=
                        {CloseDrawerHoverColor}/> : null}</IconButton>
                        <Subheader>Timeline/Trial Editor</Subheader>
                    </div>
                    <Divider />
                    <TrialForm id={this.props.id} pluginType={this.props.pluginType} />
                </div> : null}
            </div>

有关更多说明，请点击此处。它是右侧的抽屉。最右侧的文本字段应全部位于＆＃39;时间轴/试用编辑器＆＃39;： screen shot

修改 index.js：

const store = createStore(rootReducer, applyMiddleware(thunk));

injectTapEventPlugin();
ReactDOM.render(
  <MuiThemeProvider>
  <Provider store={store}>
  <App />
  </Provider>
  </MuiThemeProvider>,
  document.getElementById('container')
);

TrialForm.js和TimelineNodeEditorDrawer.js保持不变，只是我删除了MuiThemeProvider并改为使用div标签。如果有帮助，整个git repo（没有这些更改）都是here

这是我的App.js的渲染。我将TrialForm放在TimelineNodeEditorDrawer中，现在抽屉回到它应该的宽度但是我看​​不到TrialForm的任何内容。我不知道这是否是朝着正确方向迈出的一步。

App.js：

    render() {
    return (
        <div className="App" style={{overflowX: 'hidden', height: "100%"}}>
            <div className="appbar-container" style={{height: "20%"}}>
                <Appbar />
            </div>
            <div className="main-container" style={{width: '100%', display: 'flex', height: "80%"}}>
                <TimelineNodeOrganizerDrawer 
                    open={this.state.timelineOrganizerDrawerToggle}
                    width={this.state.timelineOrganizerDrawerWidth}
                    openCallback={this.openTimelineOgranizerDrawer}
                    closeCallback={this.closeTimelineOgranizerDrawer}
                    setWidthCallback={this.setTimelineOrangizerWidth}
                    openTimelineEditorCallback={this.openTimelineEditorDrawer}
                    closeTimelineEditorCallback={this.closeTimelineEditorDrawer}
                />
                <div className="main-body" 
                    style={{width: mainBodyWidth(this.state.timelineOrganizerDrawerToggle, 
                                                this.state.timelineOrganizerDrawerWidth, 
                                                this.state.timelineEditorDrawerToggle),
                     margin: '0 auto',
                    }}
                >
                <Preview />
                </div>
                <TimelineNodeEditorDrawer open={this.state.timelineEditorDrawerToggle} 
                    openTimelineEditorCallback={this.openTimelineEditorDrawer} 
                    closeTimelineEditorCallback={this.closeTimelineEditorDrawer}>
                    <TrialForm open={this.state.timelineEditorDrawerToggle} />
                </TimelineNodeEditorDrawer>
            </div>
        </div>
      );
    }
 }


 export default App;