有人可以向我解释如何在React Javascript的组件中存储道具

问题描述

我很确定我只是100％错过了这一点，因为我是React和Java语言的新手。

当我在主体中调用另一个组件时，这两段代码中的prop到底发生了什么？ table = {table}是什么，我们不应该称之为道具吗？然后，当我将props传递给其他组件时，为什么将它存储为const并指向props呢？它已经没有这些值了吗？

import RecordsGetter from './RecordsGetter'
function MainController() {
  const base = useBase();
  console.log("The name of the base is: ",base);
  const tables = base.tables;
  console.log("The name of the tables are: ",tables);

  return (
    <div>
      {tables.map((table) => {
        return (
          <div>
            <br />
            <div>{table.name}</div>
            <div>{table.id}</div>
            <div>{table.description}</div>
            <RecordsGetter table={table}/>
          </div>
        );
      })}
    </div>
  );
}

export default MainController;

import React from 'react';
import {useBase} from '@airtable/blocks/ui'

export default function RecordsGetter (props) {
    const {
        table
    } = props;
    const records = useRecords(table);
    console.log('records',records); 

    return (<div></div>)
}

解决方法

props使您可以将变量从一个组件传递到另一个组件树。

for b0 in range(i0,L,d0 + g0):
    e0 = b0 + d0
    for b1 in range(i1,d1 + g1):
        e1 = b1 + d1
        if (b1 < e0 < e1) or (b1 < b0 < e1) or (b0 < b1 < e0) or (b0 < e1 < e0):
            return True
return False 

ur将retrosgetter数据传递到另一个组件，然后可以由另一个组件读取该数据。道具可以是任何东西，从对象上的整数到数组。道具是只读的。在功能性无状态组件中，道具在函数签名中作为参数接收： 例如：

 <RecordsGetter table={table}/> 

这与

是一回事

 import React,{ Component } from 'react';
     
    class App extends Component {
      render() {
        const greeting = 'Welcome to React';
     
        return (
          <div>
            <Greeting greeting={greeting} />
          </div>
        );
      }
    }
     
    const Greeting = props => <h1>{props.greeting}</h1>;
     
    export default App;

在两种情况下，结果输出将相同。我们正在将问候语的参数传递给另一个组件。在您的情况下，您正在传递表参数