Question

import React from 'react'; 
import ItemField from './ItemField';
class App extends React.Component{
render(){
    return(
        <div>
            <ItemField /> 
            <ItemField /> 
            <ItemField /> 
            <ItemField /> 
            <ItemField /> 
            <ItemField /> 
            <ItemField /> 
        </div>
    );
}
}
export default App;


import React from 'react';  
import ModalOffer from './ModalOffer';
class ItemField extends React.Component{
render(){
    return(
        <div id="borrow-div">
          <table class="borrower-table">
            <tr id="top-sec">
              <td id="prof-pic" width="100"><img class="img" src="a_firebase_img" /></td>
              <td id="product">item name</td>
              <td>
                <div id="offer">
                  <ModalOffer />
                </div>
              </td>
            </tr>
            <tr id="bottom-sec">
              <td class="search-info">12:20AM</td>
              <td class="search-info">3 days ago</td>
              <td class="search-info">City, Province</td>
            </tr>
          </table>
        </div>
    );
}
}
export default ItemField;

您好，我想知道将信息传递给组件的最佳方法是什么。目前我已设置默认值。目标是让每个项目字段填充最新的搜索项目及其组件。

最好的方法是设置初始状态并使用从firebase检索的信息更改状态吗？

├── _Item1
|   ├── User
|   ├── Time
|   ├── City
|   ├── Province
├── _Item2
|   ├── User
|   ├── Time
|   ├── City
|   ├── Province

这是FireBase结构。谢谢！

Answer 1

你在道具中的东西，例如<ItemField myProp={value} />

来自组件，执行{myProp} = this.props

将firebase数据传递给React中的组件

1 个答案: