Question

我有两个要渲染的组件：

import React from 'react';
import { View } from 'react-native';
import PositiveMetrics from './PositiveMetrics';
import PositiveNews from './PositiveNews';

const PositiveDashboard = props => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
      }}
    >
      <PositiveMetrics />
      <PositiveNews />
    </View>
  );
};

export default PositiveDashboard;

和

import React from 'react';
import { View } from 'react-native';
import NegativeMetrics from './PositiveMetrics';
import NegativeNews from './PositiveNews';
import { connect } from 'react-redux';

class NegativeDashboard extends React.Component {
  render() {
    return (
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
        }}
      >
        <NegativeMetrics />
        <NegativeNews />
      </View>
    );
  }
}

export default connect()(NegativeDashboard);

我想在下面的组件中引用我的组件；但是，当我这样做时，它仅呈现正面的仪表板（除非我如下图所示剥离子组件）：

import React from 'react';
import { connect } from 'react-redux';
import {
  Container,
  Header,
  Tab,
  Tabs,
  TabHeading,
  Text,
} from 'native-base';
import { View } from 'react-native';
import PositiveMetrics from './PositiveMetrics';
import NegativeMetrics from './NegativeMetrics';
import NegativeNews from './NegativeNews';
import PositiveNews from './PositiveNews';

class Dashboard extends React.Component {
  static navigationOptions = {
    header: null,
  };
  render() {
    return (
      <Container>
        <Header hasTabs />
        <Tabs>
          <Tab
            heading={
              <TabHeading>
                <Text>Positive Sentiment</Text>
              </TabHeading>
            }
          >
            /* I want to render PositiveDashboard in place of what's 
            below */
            <View
              style={{
                flex: 1,
                justifyContent: 'center',
              }}
            >
              <PositiveMetrics />
              <PositiveNews />
            </View>
          </Tab>
          <Tab
            heading={
              <TabHeading>
                <Text>Negative Sentiment</Text>
              </TabHeading>
            }
          >
            /* I want to render NegativeDashboard in place of what's 
            below */
            <View
              style={{
                flex: 1,
                justifyContent: 'center',
              }}
            >
              <NegativeMetrics />
              <NegativeNews />
            </View>
          </Tab>
        </Tabs>
      </Container>
    );
  }
}

const mapStateToProps = state => {
  return {
    negativeNews: state.top5NegativeStories,
  };
};

export default connect(mapStateToProps)(Dashboard);

如果这个问题太简单了，我本来是要对本机做出反应的。试图理解为什么我无法呈现我的PositiveDashboard和NegativeDashboard组件（都依赖于redux存储）。如果有帮助，请在下面链接我的github存储库。

Github存储库：https://github.com/aludwin1/pulse

Answer 1

在NegativeDashboard组件上，您尝试从错误的文件中导入NegativeMetrics和NegativeNews（可能是由于从PositiveDashboard组件复制并粘贴了）。要解决此问题，请更改这些导入

import NegativeMetrics from './PositiveMetrics';
import NegativeNews from './PositiveNews';

到

import NegativeMetrics from './NegativeMetrics';
import NegativeNews from './NegativeNews';

React-Native组件未渲染或使用错误的道具渲染

1 个答案: