Question

我要做的是在我的应用中放置一个侧栏但是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);

Answer 1

在我看来，您的代码中存在拼写错误 - leftSideBar，rightSideBar和style属性与<SideBar>无关，因为您有额外的> - 我想如果你刚用过

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

你可能很好

Answer 2

leftSideBar，rightSideBar和style应该是SideBar组件的道具，如下所示：

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

Answer 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>

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

3 个答案: