Question

我正在关注react-native的udemy教程。

我试图将我的index.js中的道具传递给我的header.js。标题应该说，＆＃34;专辑＆＃34;。但总是显得空白。

如果我从header.js中删除 {props.headerText} 并将其替换为

＆＃34;相册＆＃34;

然后它的工作原理。但是我试图按照教程说明重新组合组件。

注意：我正在使用Create React Native App，这是在Android模拟器上。 App.js

import React from 'react';
import { View } from 'react-native';
import Header from './src/components/header';

export default class App extends React.Component {
  render() {
    return (
      <Header />
    );
  }
}

index.js

import React from 'react';
import { Text, AppRegistry } from 'react-native';
import Header from './src/components/header';

const App = () => (
    <Header headerText={'Albums'} />
);

AppRegistry.registerComponent('albums', () => App);

header.js

import React from 'react';
import { Text, View } from 'react-native';

const Header = (props) => {
    const { textStyle, viewStyle } = styles;

    return (
        <View style={viewStyle}>
            <Text style={textStyle}>{props.headerText}</Text>
        </View>
    );
};

const styles = {
    viewStyle: {
        justifyContent: 'center'
    },
    headerStyle: {
        fontSize: 20
    }
  };

  export default Header;

我错过了什么吗？我逐行遍历每个文件，但我找不到任何问题。

谢谢！

Answer 1

我建议你

const Header = ({props}) => {
    const { textStyle, viewStyle } = styles;

    return (
        <View style={viewStyle}>
            <Text style={textStyle}>{props.headerText}</Text>
        </View>
    );
};

传递道具;

const App = () => (
    <Header props={someProps} />
);

将索引中的prop传递给头部组件

1 个答案: