Javascript 为什么我在iOS模拟器中会出现这种奇怪的错误？

我想做的是在我的应用程序中放置一个侧栏，但是

对象作为React子对象无效（找到： 带有键的对象（flex，backgroundColor}）。如果 你的意思是呈现一组孩子， 改用数组。
在视图中（位于Animatedlmplementation.js: 184q）
在AnimatedComponent中（位于SidebarView.js 210）
在RCTView中（在View.js:133中）
在视图中（在SidebarView.js:2O3中）
在侧边栏视图中（index.ios.js:48）
条形图（在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

组件希望它的子道具是单个ReactElement，因此我将所有内容包装在一个名为

的组件中

这是我的密码：

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

import React，{Component}来自'React'；
从“react native”导入{AppRegistry，Text}；
从'react redux'导入{Provider}；
从“./pages/Application”导入应用程序；
从“/redux”导入存储；
从“/utilities/api”导入api；
从“反应本机侧栏”导入侧栏；
导出默认类DApp扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：[]，
孤岛加载：正确
}
console.log（“某物”）；
}
组件willmount（）{
api.getData（）.then（（res）=>{
这是我的国家({
数据：res.data
})
});
}
renderLeftSideBar（）{
返回(
左边的酒吧有东西！
);
}
renderRightSideBar（）{
返回(
这里是右边的酒吧！
);
}
renderContent（）{
返回(
内容！
);
}
render（）{
常数条=（）=>{
返回(
leftSideBar={this.renderLeftSideBar（）}
rightSideBar={this.renderRightSideBar（）}
style={{flex:1，backgroundColor:'black'}>{this.renderContent（）}
);
}
if（此.state.isLoading）{
log（“数据为：“+this.state.data”）；
}否则{
log（“Else已执行”）；
}
返回(
);
}
}
AppRegistry.registerComponent（'DApp'，（）=>DApp）；

在我看来，您的代码中似乎有输入错误-

左侧边栏

，

右侧边栏

，

样式

属性与

没有关联，因为您有一个额外的

-我认为如果您只是使用

        return(
            <SideBar
                leftSideBar = {this.renderLeftSideBar()}
                rightSideBar = {this.renderRightSideBar()}
                style = {{flex: 1, backgroundColor: 'black'}}>{this.renderContent()}
                <Application/>
            </SideBar>
        );

返回(
{this.renderContent（）}
);

---

你可能会很好

在我看来，你的代码中有一个打字错误-

左侧边栏

，

右侧边栏

，

样式

属性与

没有关联，因为你有一个额外的

-我认为如果你只是使用

        return(
            <SideBar
                leftSideBar = {this.renderLeftSideBar()}
                rightSideBar = {this.renderRightSideBar()}
                style = {{flex: 1, backgroundColor: 'black'}}>{this.renderContent()}
                <Application/>
            </SideBar>
        );

返回(
{this.renderContent（）}
);

---

您可能会很好

左侧边栏、右侧边栏和样式应该是边栏组件的支柱，如下所示：

<SideBar leftSideBar = {this.renderLeftSideBar()} rightSideBar = {this.renderRightSideBar()} style = {{flex: 1, backgroundColor: 'black'}}>{this.renderContent()}
                <Application/>
            </SideBar>

{this.renderContent（）}

左侧边栏、右侧边栏和样式应该是边栏组件的支柱，如下所示：

<SideBar leftSideBar = {this.renderLeftSideBar()} rightSideBar = {this.renderRightSideBar()} style = {{flex: 1, backgroundColor: 'black'}}>{this.renderContent()}
                <Application/>
            </SideBar>

{this.renderContent（）}

条形组件的定义没有返回有效的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>

import{您的其他组件…，View}来自'react native'；
{this.renderLeftSideBar（）}
{this.renderRightSideBar（）}
{this.renderContent（）}

条形组件的定义没有返回有效的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>

import{您的其他组件…，View}来自'react native'；
{this.renderLeftSideBar（）}
{this.renderRightSideBar（）}
{this.renderContent（）}

leftSideBar={this.renderLeftSideBar（）}rightSideBar={this.renderRightSideBar（）}style={{{flex:1，backgroundColor:'black'}}>{this.renderContent（）}看起来这个属性应该被输入到边栏leftSideBar={this.renderLeftSideBar（）}rightSideBar={this.renderRightSideBar（）}style={{flex:1，backgroundColor:'black'}}>{this.renderContent（）}看起来这些属性应该被输入到SidebarGreat中，很高兴我能帮上忙。很好，很高兴我能帮上忙。