如何将值从 openAPIweather 传递到组件

Question

我正在使用 React-Native 制作一个天气应用程序，现在我正在尝试获取 API 的数据，因此创建了一个返回名称、温度和天气的文件 WeatherData.js。

我想将数据传递给一个名为 title 的组件，但它不起作用

WeatherData.js

    return (
        <View>
            {weatherData ? (
                <View>
                    <Title
                        name={weatherData?.name}
                        temperature={weatherData?.main?.temp}
                        description={weatherData?.weather[0]?.description}
                    />
                    console.log({weatherData})
                </View>
            ) : (
                <Text>No weather data available</Text>
            )}
        </View>

    );
};

export default Data;

标题.tsx 这是一个传递 name prop 的示例

import { Text } from "react-native";
import { View, StyleSheet, StatusBar } from "react-native";


const Title = ({ name }) => {
    return (
        <View style={FontStyle.Align}>
            <Text style={FontStyle.Bold} >{name}</Text>
            <Text style={FontStyle.Thin} >Tue, Jun 30</Text>
        </View>
    );
}


export default Title;

Answer 1

如果您想使用三元运算符，请确保将

boolean

传递给第一个参数。

因此，与其写成

{weatherData ? ... : ...}

，不如将其转换为布尔值，如

{!!weatherData}

。

其次，你需要加上大括号才能将其作为 JS 命令运行。

// Rendered as Text
console.log(...)

// Rendered as JS
{console.log(...)}

否则它将呈现为文本。

return (
  <View>
    {!!weatherData ? (
      <View>
        <Title
          name={weatherData?.name}
          temperature={weatherData?.main?.temp}
          description={weatherData?.weather[0]?.description}
        />
        {console.log({weatherData})}
      </View>
    ) : (
      <Text>No weather data available</Text>
    )}
  </View>
);