传递、接收和使用函数到子组件中

Posted 2023-02-23

【中文标题】传递、接收和使用函数到子组件中

【英文标题】：Pass, Receive, and Use function into child Component

【发布时间】：2019-02-17 13:43:13

【问题描述】：

我仍在学习 ReactJS / React Native，我确信我被一件愚蠢的事情所困扰。这是我的情况：我想在我的子组件中接收数据并将其显示在模态中。所以：

我有一个这样的函数（axios、API、...）：

getProductInfo = (product_id) => 
    axios.get(
        `API-EXAMPLE`
    )
    .then((response) => 
        this.setState(
            isVisible: false,
            productInfo: response.data
        )
        console.log(this.state.productInfo);
    )

我使用“onModalPress”将函数传递给我的子组件：

<CatalogList productsList=this.state.displayProducts onModalPress=this.getProductInfo/>

还有一些关于子组件的信息：

const CatalogList = (productsList, onModalPress) => (
<Card containerStyle=styles.container>

<View style= padding:20, margin:0, flexDirection: 'row', flexWrap: 'wrap', flex: 1, justifyContent: 'space-between' >

    productsList.map((p, i) => 
        return (
            <TouchableHighlight key=i onPress=() => onModalPress(p.id)>
                <View style=style.card>
                    <View style=style.content>
                        <View style=width: 170, zIndex: 2>
                            <Text style=style.name>p.id</Text>
                            <Text style=style.name>p.name</Text>
                            <Text style=style.winemaker>Domaine : p.domain</Text>
                            <Text style=style.winemaker>Origine : p.wine_origin</Text>
                            <Text style=style.aop>Appellation : p.appellation</Text>
                        </View>
                        <Image
                            style=style.image
                            source= uri: p.image, width: 140, height: 225, 
                        />
                    </View>
                    <View style=style.entitled>
                        <Text style=[style.priceText, style.cadetGrey]>p.publicPriceText</Text>
                        <Text style=style.priceText>p.subscriberPriceText</Text>
                    </View>
                    <View style=style.row>
                        <Text style=[style.price, style.cadetGrey]>p.price €</Text>
                        <Text style=style.price>p.subscriber_price €</Text>
                    </View>
                    <View style=[backgroundColor: p.label_colour, style.label]>
                        <Text style=style.labelText>p.label</Text>
                    </View>
                    <Modal isVisible=false>
                        <View style= flex: 1 >
                            /* <Text>productInfo.rewiew_wine_waiter</Text> */
                        </View>
                    </Modal>
                </View>
            </TouchableHighlight>
        );
    )

</View>
  </Card>
);

“p.id”来自我通过另一个 Axios API 调用获得的另一个数据 (productList)。使用“p.id”，我得到了函数中需要的 product_id

getProductInfo

一切正常，我在我的 console.log (this.state.productInfo) 中显示信息。

我的问题，我认为这很简单...我如何“存储/存储”我在 console.log 中的 const/props 中的这些信息，以便在我的 Modal 中使用它，并像在这个例子中那样调用它：

<Modal isVisible=false>
   <View style= flex: 1 >
      <Text>productInfo.rewiew_wine_waiter</Text>
   </View>
</Modal>

当然，欢迎任何其他建议！

【问题讨论】：

你的 console.log 在哪里？

你能发布更多代码吗？

你在哪里使用这个Modal？你可以将productInfo 传递给你的Modal，作为你的Modal 的道具。你有这个问题吗？

我更新了代码。我把我的子组件的所有代码。在这里，您有 .map ，我可以在其中获取有关每个产品的信息，然后我会取回 p.id 以通过我的函数。模态在这段代码中所以，当我通过一个产品时，我可以得到我放在我的函数中的product_id，但只是在console.log中显示它

【参考方案1】：

React 是关于沿组件层次结构的单向数据流

假设您有一个Container 组件来获取所有数据：

    class MyContainer extends Component
        state = 
            myItensToDisplay: []
        
        componentDidMount()
            //axios request
               .then(res => this.setState(myItensToDisplay: res.itens))  
        
    

看起来不错！现在，您已将要显示的所有数据提取并存储在容器的状态中。让我们将它传递给Itemcomponent：

    class MyContainer extends Component
        // All the code from above

       render()
            const itens = this.state.myDataToDisplay.map( item =>
                return(<Item name=item.name price=item.price />);
            )

            return(
                <div>
                    itens
                </div>
            )
        
    

现在您正在获取要在父组件中显示的所有数据，并通过道具将这些数据分发给它的子组件。

【讨论】：

是的，我可以做到这一点，我正在上面的代码中做到这一点。我编辑了我的子组件的代码。我正在通过我的 productList （我在我的父组件中的状态）做一个 .map 。这是我可以在 onModalPress(p.id) 中获取 product_id 并将其显示在函数的 console.log 中的地方。那我怎样才能把它当成道具呢？

我相信你看错了。你有一个productList 这意味着你在你的父组件中获取了几个产品。现在您必须将此列表中的每个单独的产品理解为一个组件。所以映射应该发生在你的父组件内，并为列表中的每个元素返回一个单独的 Product 组件。在您的父母中：const myProducts = this.state.productlist.map(product => (<Product myprops=product />))。然后在你的父母中渲染myProducts