如何使React Native中可重复使用的代码？

Question

如何创建可重复使用的“函数”：

const Customer = (name, ID) => {
<Text style={{ fontSize: 12 }}>{name}</Text>
<Text style={{ fontSize: 10 }}>{ID}</Text>}

这样我可以轻松地将客户插入以下功能。

function Shop() {
return (
    <DraxProvider>

        <DraxView>
            <Customer name="A" ID="1">
        </DraxView>

        <DraxView>
            <Customer name="B" ID="2">
        </DraxView>

        <DraxView>
            <Customer name="C" ID="3">
        </DraxView>

    </DraxProvider>
)}

blockquote

Answer 1

您应该首先尝试将您的customer作为一个类似的组件，

const Customer = ({name, ID}) => (
<>
  <Text style={{ fontSize: 12 }}>{name}</Text>
  <Text style={{ fontSize: 10 }}>{ID}</Text>
</>
)

请注意以下注意：

• 箭头符号后，您应该使用（符号，而不是{ {
• 使用props将参数传递到
• ＆lt;＆lt;＆lt;/＆gt;/＆gt; aka fragments的组件用法文本组件

您应该能够按照预期重复使用

function Shop() {
return (
    <DraxProvider>

        <DraxView>
            <Customer name="A" ID="1">
        </DraxView>

        <DraxView>
            <Customer name="B" ID="2">
        </DraxView>

        <DraxView>
            <Customer name="C" ID="3">
        </DraxView>

    </DraxProvider>
)}