我要做的是在我的应用中放置一个侧栏但是I'm getting this weird error。
对象作为React子对象无效(找到: 带键的对象(flex,backgroundColor})。如果 你打算渲染一个孩子的集合, 改为使用数组 在视图中(在Animatedlmplementation.js: 184q)
在AnimatedComponent中(在SidebarView.js 210)
在RCTView(在View.js:133)
在视图中(在SidebarView.js:2O3)
在SidebarView中(在index.ios.js:48)
在Bar(在index.ios.js:65)
在提供者(在index.ios.js:6q)
在DApp中(在renderApplication.js:35)
在RCTView(在View.js:133)
在视图中(在AppContainer.js:98)
在RCTView(在View.js:133)
在视图中(在AppContainer.js:97)
我知道react-redux
<Provider/>
组件期望其子prop成为单个ReactElement,因此我将所有内容包装在名为<Bar/>
的单个组件中。
这是我的代码:
import React, { Component } from 'react';
import { AppRegistry, Text} from 'react-native';
import { Provider } from 'react-redux';
import Application from './pages/Application';
import store from './redux';
import api from './utilities/api';
import SideBar from 'react-native-sidebar';
export default class DApp extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
isLoading: true
}
console.log("something");
}
componentWillMount() {
api.getData().then((res) => {
this.setState({
data: res.data
})
});
}
renderLeftSideBar() {
return(
<Text>Something here for left side bar!</Text>
);
}
renderRightSideBar() {
return(
<Text>Something here for right side bar!</Text>
);
}
renderContent() {
return(
<Text>The content!</Text>
);
}
render() {
const Bar = () => {
return(
<SideBar>
leftSideBar = {this.renderLeftSideBar()}
rightSideBar = {this.renderRightSideBar()}
style = {{flex: 1, backgroundColor: 'black'}}>{this.renderContent()}
<Application/>
</SideBar>
);
}
if(this.state.isLoading) {
console.log("The data is: " + this.state.data);
} else {
console.log("Else got executed");
}
return (
<Provider store={store}>
<Bar/>
</Provider>
);
}
}
AppRegistry.registerComponent('DApp', () => DApp);
答案 0 :(得分:1)
在我看来,您的代码中存在拼写错误 - leftSideBar
,rightSideBar
和style
属性与<SideBar>
无关,因为您有额外的>
- 我想如果你刚用过
return(
<SideBar
leftSideBar = {this.renderLeftSideBar()}
rightSideBar = {this.renderRightSideBar()}
style = {{flex: 1, backgroundColor: 'black'}}>{this.renderContent()}
<Application/>
</SideBar>
);
你可能很好
答案 1 :(得分:1)
leftSideBar,rightSideBar和style应该是SideBar组件的道具,如下所示:
<SideBar leftSideBar = {this.renderLeftSideBar()} rightSideBar = {this.renderRightSideBar()} style = {{flex: 1, backgroundColor: 'black'}}>{this.renderContent()}
<Application/>
</SideBar>
答案 2 :(得分:0)
Bar组件的定义不返回有效的JSX。尝试类似:
import { your other components ..., View } from 'react-native';
<SideBar>
{this.renderLeftSideBar()}
{this.renderRightSideBar()}
<View style = {{flex: 1, backgroundColor: 'black'}}>
{this.renderContent()}
</View>
<Application/>
</SideBar>