时间戳

首页 > 解决方案 > 自定义 View 或 ScrollView 组件

reactjs - 自定义 View 或 ScrollView 组件

问题描述

是否可以像下面的代码一样创建自定义模板并将其导出并重用？

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

const CustomView = () => {
    return (
        <View>
            <Text>Test 1 </Text>
            *** custom code ***
        </View>
    )
}

export default CustomView

现在我如何使用上面的 CustomView 并添加我自己的标签，例如

import CustomView from "../CustomView";
 return (
            <CustomView>
                <Text>Test 2 </Text>
            </CustomView>
        )

所以当我运行我的输出将是

Test 1
Test 2

我们可以做这样的事情吗？所以我可以通过重用模板更好地组织我的代码。

标签： reactjsreact-native

解决方案

这样做是可能的，也是一种很好的做法。如果您想将其他组件放入自定义组件中，则自定义组件将是父组件，而里面的部分将是子组件。

自定义视图.js

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

const CustomView = ({ children }) => {
  return (
      <View>
          <Text>Test 1</Text>
          {children}
      </View>
  )
}

export default CustomView;

App.js（或其他文件）

import React from "react";
import { Text } from "react-native";


const App = () => {
  return (
    <CustomView>
      <Text>Test 2</Text>
    </CustomView>
  );
}

export default App;

您当然需要设置自定义组件的样式。不要忘记，最佳实践是始终创建尽可能多的可重用组件。更多的代码并不意味着更好的代码。

推荐阅读