Question

如何在此VIEW语句中设置const？

每次尝试执行此操作时，任一行都会遇到意外的令牌问题。

有什么想法吗？

render() {
return (
  <View style={styles.theContainer}>
    <FlatList
    data={this.state.data}
    keyExtractor={(x,i)=>i}
    renderItem={({item}) =>
      <View>
            {
              const fm = (item.featured_media);
              const theMediaLink = `https://example.com/json/media/${ item.featured_media }`;
            }
            <Image source={fm} />
            <HTMLView
              value={item.title.rendered}
              styles={styles.topicTitle}
            />
            <HTMLView
              value={item.excerpt.rendered}
            />
      </View>
    }
    />
  </View>
);
}

Answer 1

是的。您不能像这样在jsx语句中定义变量。但是您可以稍微重组代码，而它应该可以工作：

render() {
return (
  <View style={styles.theContainer}>
    <Text style={styles.topicTitle}>TANGOTOPICS.COM</Text>
    <FlatList
    data={this.state.data}
    keyExtractor={(x,i)=>i}
    renderItem={({item}) => {
      const fm = (item.featured_media);
      const theMediaLink = `https://example.com/wp-json/wp/v2/media/${ item.featured_media
      return (
        <View>
          <Image source={fm} />
          <HTMLView
            value={item.title.rendered}
            styles={styles.topicTitle}
          />
          <HTMLView
            value={item.excerpt.rendered}
          />
        </View>
      )}
    }
    />
  </View>
);
}

要澄清与渲染方法的区别：

您正在使用函数renderItem()渲染视图，该函数是一个隐式返回<View>的箭头函数：

renderItem={({item}) =>
      <View>
            {
              const fm = (item.featured_media);
              const theMediaLink = `https://example.com/wp-json/wp/v2/media/${ item.featured_media }`;
            }
...

这样，const声明在return statemant内，这在Javascript中无效。在我的示例中，我没有从renderItem()隐式返回任何值，而是先声明了const，然后显式返回<View>：

renderItem={({item}) => {
      const fm = (item.featured_media);
      const theMediaLink = `https://example.com/wp-json/wp/v2/media/${ item.featured_media
      return (
        <View>
...

为进一步说明差异，箭头函数的工作方式如下：如果将表达式放在箭头后面，它将隐式返回该表达式：

(param1, param2, …, paramN) => expression

如果您将表达式放在如下所示的大括号中，则必须明确返回

// doesn't return anything
(param1, param2, …, paramN) => { expression }
// returns the expression
(param1, param2, …, paramN) => { return (expression) } 
// above is equivalent to:
(param1, param2, …, paramN) => expression

我希望这会有所帮助。

在FLATLIST / VIEW中设置CONST

1 个答案: