Question

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

这是我的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
    },
});

这是标题组件

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图标组件，而且渲染图标的组件甚至不必知道要渲染的内容：

术语“渲染道具”是指用于共享代码的简单技术 React组件之间使用其值为函数的prop。

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>
);

Answer 2

您渲染两个组件，左侧和右侧，并将if条件置于状态。

标头组件渲染方法

render() {
  const { leftOrRight } = this.props // right - true, left - false
  return(
    ...
    { leftOrRight ? <RightIcon />  : <LeftIcon />}
  );

}

调用标题的内部组件

import Header from './somepath ...';

class Something extends React.Component {
   this.state = { leftOrRight }

   render() {
     return(
        <Header leftOrRight = {this.state.LeftOrRight}/>
     );
   }
}

您可以拥有一个在父类中设置leftOrRight的函数

Answer 3

执行此操作的一种方法是编写一个Header组件并将所有内容作为props传递，然后您可以在Header Components Props中访问它们，例如..

    <Header title="HeaderTitle" 
            leftButtonTitle="LeftButton" 
            rightButton={canBeAObjectWithSomeInfo} 
            leftButtonClick={handleClick} />

然后在你的标题组件中（可以是类或函数）

const Header = ({}) => (
  <View>
    <View onPress={this.props.handleClick}>{this.props.leftButton}</View>
    <View>{this.props.title}</View>
    <View onPress={this.props.handleRightClick}>{this.props.rightButton}</View>
  </View>
)

你可以拥有这样的东西然后你可以相应地设计标题

React中子元素的条件渲染

3 个答案: