为什么我在 iOS 模拟器中收到这个奇怪的错误？答案

【问题标题】：Why am I getting this weird error in iOS simulator?为什么我在 iOS 模拟器中收到这个奇怪的错误？
【发布时间】：2017-12-21 11:28:02
【问题描述】：

我想做的是在我的应用程序中放置一个侧边栏，但 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）
在酒吧（在 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/> 组件期望它的子道具是一个单一的 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);

【问题讨论】：

leftSideBar = {this.renderLeftSideBar()} rightSideBar = {this.renderRightSideBar()} style = {{flex: 1, backgroundColor: 'black'}}>{this.renderContent( )} 看起来这个属性应该已经被输入到侧边栏

标签： javascript ios reactjs react-native

【解决方案1】：

在我看来，您的代码中有错字 - leftSideBar、rightSideBar 和 style 属性与 <SideBar> 无关，因为您有一个额外的 > - 我认为如果您刚刚用过

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

你可能会很好

【讨论】：

太好了，很高兴我能帮上忙。

【解决方案2】：

leftSideBar、rightSideBar 和 style 应该是 SideBar 组件的 props，像这样：

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

【讨论】：

【解决方案3】：

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>

【讨论】：