javascript - React中子元素的条件渲染

Question

我正在尝试在 React-Native 中编写一个可重用的 header 组件。我想以左右按钮可以作为子组件传递的方式编写它。要知道在哪里呈现哪个按钮，我想传递一个像 rightIcon 或 leftIcon 这样的 Prop 。但是我不知道如何访问这些 Prop 。

这是我的 App.js 文件

import React from 'react';
import {StyleSheet, TouchableHighlight, View} from 'react-native';
import Header from "./src/Header";
import {Ionicons} from '@expo/vector-icons';

export default class App extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Header headerText={"Barcode Scanner"}>
                    <TouchableHighlight righticon>
                        <Ionicons name="md-barcode" size={36} color="white"></Ionicons>
                    </TouchableHighlight>
                </Header>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
});

这是 header 组件

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

export default class Header extends React.Component {
    render() {

        const {textStyle, viewStyle, rightButton} = styles;

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

    renderRightChild = () => {
        console.log("Check if rightIcon Prop is set");
    }
}


const styles = {
        viewStyle: {
            backgroundColor: '#5161b8',
            justifyContent: 'center',
            alignItems: 'center',
            height: 80,
            paddingTop: 25,
            shadowColor: '#000',
            shadowOffset: {width: 0, height: 2},
            shadowOpacity: 0.2,
            elevation: 2,
            position: 'relative'
        },
        textStyle: {
            color: '#fff',
            fontSize: 20
        },
        rightButton: {
            position: 'absolute',
            top:
                35,
            right:
                20
        }

    }
;

我已经尝试过使用 React.Children.toArray 但这总是会引发请求实体太大的错误。

谢谢大家的回答

Answer 1

我猜你总是可以使用 render prop这样你不仅可以决定是否渲染 left/right 图标组件，而且渲染图标的组件甚至不必知道要渲染什么:

The term “render prop” refers to a simple technique for sharing code between React components using a prop whose value is a function.

return (
  <View style={styles.container}>
    <Header
      headerText={"Barcode Scanner"}
      renderRightIcon={() => (
        <TouchableHighlight righticon>
          <Ionicons name="md-barcode" size={36} color="white" />
        </TouchableHighlight>
      )}
    />
  </View>
);

然后你可以使用调用右边的图标作为一个函数:

return (
  <View style={viewStyle}>
    <Text style={textStyle}>{this.props.headerText}</Text>
    {renderLeftIcon && (
      <View style={leftButton}>
        {renderLeftIcon()}
      </View>)
    }
    {renderRightIcon  && (
      <View style={rightButton}>
        {renderRightIcon()}
      </View>)
    }
  </View>
);