如何在我的 React Native 函数组件中为函数传递参数？

Question

我有一个 Picker 组件，其中填充了来自本地领域数据库的数据，该组件具有一个函数，可以接收数据库模式的名称作为参数。我想要做的是，不是在函数中写入模式的名称，而是将其作为 prop 或参数接收，这样我就可以使用相同的组件来显示具有不同信息的选择器。

这是我的代码：

const PickerDB: React.FC<PickerProps> = (props) => {
    const [data, setData] = useState([]);

    async function loadData() {
        setData(await GetDataFromDB('source')); // this is what I want to modify
    }

    useEffect(() => {
        loadData();
    }, [])

    let values = data.map((data) => {
        return (
            <Picker.Item
                label={data.description}
                value={data.id}
                key={data.id}
            />
        )
    })

    return (
        <Picker
            selectedValue={props.selectedValue}
            style={{ height: 45, width: "70%" }}
            onValueChange={props.onValueChange}
        >
            {values}
        </Picker>
    );

由于我的应用程序中有其他功能，我需要使用 React.FC<PickerProps> 创建我的组件。

我想这样使用我的组件：

<PickerDB source={'schemaName'} />

Answer 1

这是您需要做的：

async function loadData(source) {
  setData(await GetDataFromDB(source)); // this is what I want to modify
}

useEffect(() => {
  if (props.source) {
    loadData(props.source);
  }
}, [props.source]);

如何在我的 React Native 函数组件中为函数传递参数？

How can I pass a param for a function inside my React Native Function Component?

reactjs

react-native

react-component