首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何将React上下文API中的变量插入到占位符中?

如何将React上下文API中的变量插入到占位符中?
EN

Stack Overflow用户
提问于 2019-02-02 08:51:09
回答 2查看 494关注 0票数 0

我正在使用React Context API以多种语言显示我的站点。除了当我尝试在我的文本区域中插入一个占位符时,它显示[object Object]之外,一切都正常工作。如果我在实际中使用相同的组件,例如在

标签正确显示!

代码语言:javascript
运行
AI代码解释
复制
import React, { Component } from "react";
import Translate from '../translations/Translate'

class FormEntry extends Component {
  render() {
    return (
      <div className="inputArea shadow">
        <textarea
          className="dataInputChild"
          placeholder={<Translate string={'submitbox.copy-and-paste'}/>}//this displays [object Object]
        />
        <p><Translate string={'submitbox.copy-and-paste'}/></p> //this displays the desired text
      </div>
    );
  }
}
export default FormEntry;

Translate组件如下所示:

代码语言:javascript
运行
AI代码解释
复制
import React, { PureComponent } from "react";
import en from "./en.json";
import es from "./es.json"; //these are the dictionary files
import cn from "./cn.json";
LanguageContext = React.createContext()

export default class Translate extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      langs: {
        en,
        es,
        cn
      }
    };
  }
  render() {
      const {langs} = this.state 
      const {string} = this.props
    return (
      <LanguageContext.Consumer>
        {value => langs[value][string]}
      </LanguageContext.Consumer>
    );
  }
}

有没有人看到我做错了什么?

谢谢!

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-02-02 10:31:29

为了扩展Estus' answer,只需创建一个单独的函数,它接受语言、语言值和字符串(就像您在render方法中的Translate组件中所做的那样),并在需要的地方重用它。

您将把上下文从实际功能中分离出来,并且可以像这样重用函数:(或者在您可以访问上下文的任何其他组件中)。

代码语言:javascript
运行
AI代码解释
复制
// langs -> coming from context or some map of languages you use
// langValue -> coming from the context API
// 'submitbox.copy-and-paste' -> the actual string you want to translate

const translation = translate(langs, langValue, 'submitbox.copy-and-paste');
// and then use the variable in as placeholder and the <p> tag
// or if different string values see below

<div className="inputArea shadow">
   <textarea 
      className="dataInputChild" 
      placeholder={translate(langs, langValue, 'submitbox.copy-and-paste')}
   />
   <p>{translate(langs, langValue, 'submitbox.copy-and-paste')}/></p>
</div>
票数 1
EN

Stack Overflow用户

发布于 2019-02-02 10:06:34

<Translate string={'submitbox.copy-and-paste'}/>是React元素,它是一个对象。它不能作为placeholder属性提供,因为需要字符串。

FormEntry组件可以使用contextType来访问上下文。这限制了组件只能使用单个上下文。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/54491455

复制
相关文章
React 中的占位符 Fragment
在 React 项目中, render 方法只能有一个根元素,一般都是 <div> <div/> ,然后在里面写上我们的组件,渲染到浏览器一看,除了我们想要显示的组件,外面还套着一层 div ,如果在写项目的时候,套了很多曾组件,那么每一层都会多出来一个父级元素 div ,不美观,而且在调整样式的时候会有些麻烦
子舒
2022/06/09
1.8K0
浅谈mybatis中的占位符
浅谈mybatis中的占位符 #{}占位符 ​ 把传入的数据都当成字符串,会对传入的数据自动加上引号 例如: select * from emp where name=#{name} --会被解析转义成 select * from emp where name="name" ${}占位符 ​ 不会经过转义,直接把值传入sql中 例如: select * from emp where name=${name} --不会被转义 select * from emp where name=name 但是需要注意的
许喜朝
2020/08/11
1.7K0
Swift 中的类型占位符
Swift 的类型推断能力从一开始就是语言的核心部分,它极大地减少了我们在声明有默认值的变量和属性时手动指定类型的工作。例如,表达式var number = 7不需要包含任何类型注释,因为编译器能够推断出值7是一个Int,我们的number变量应该被相应的类型化。
Swift社区
2022/07/05
1.8K0
如何在 React 中的 Select 标签上设置占位符?
在 React 中,<Select> 标签是用于创建下拉选择框的组件。在某些情况下,我们希望在选择框中添加一个占位符,以提醒用户选择合适的选项。本文将详细介绍如何在 React 中的 <Select> 标签上设置占位符,并提供示例代码帮助你理解和应用这个功能。
网络技术联盟站
2023/06/07
3.4K0
Swift 中的类型占位符
Swift 的类型推断能力从一开始就是语言的核心部分,它极大地减少了我们在声明有默认值的变量和属性时手动指定类型的工作。例如,表达式var number = 7不需要包含任何类型注释,因为编译器能够推断出值7是一个Int,我们的number变量应该被相应的类型化。
韦弦zhy
2022/04/26
1.5K0
python中占位符的使用
小明的成绩从去年的72分提升到了今年的85分,请计算小明成绩提升的百分点,并用字符串格式化显示出'xx.x%',只保留小数点后1位:
py3study
2020/01/10
2.2K0
关于python中format占位符中的 {!} 参数[通俗易懂]
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/156110.html原文链接:https://javaforall.cn
全栈程序员站长
2022/09/07
1.9K0
Spring中PropertyPlaceholderConfigurer替换占位符的问题
多个Maven项目聚合的时候,每个maven都有自己的配置文件,并且都用了PropertyPlaceholderConfigurer替换占位符,然后启动的时候一直报错,说替换失败;问题症结就是 spirng配置多个PropertyPlaceholderConfigurer的问题
石臻臻的杂货铺[同名公众号]
2021/07/14
1.4K0
聊聊 SpringBoot 中的两种占位符:@*@ 和 ${*}
在 SpringBoot 项目中,我们经常会使用两种占位符(有时候还会混用),它们分别是:
xiaoxi666
2021/12/14
5.6K0
聊聊 SpringBoot 中的两种占位符:@*@ 和 ${*}
如何将 Matplotlib 可视化 插入到 Excel 表格中?
在生活中工作中,我们经常使用Excel用于储存数据,Tableau等BI程序处理数据并进行可视化。我们也经常使用R、Python编程进行高质量的数据可视化,生成制作了不少精美优雅的图表。
朱小五
2022/04/11
3.7K0
如何将 Matplotlib 可视化 插入到 Excel 表格中?
React技巧之select标签设置占位符
原文链接:https://bobbyhadz.com/blog/react-placeholder-select[1]
chuckQu
2022/08/19
7180
React技巧之select标签设置占位符
我们是如何将 Cordova 应用嵌入到 React Native 中
重写一个应用是一件简单的事,可是演进一个应用则是一件复杂的工作。 过去的一年多里,我在工作上的主要职责是:手机 APP 开发。日常主要是编写基于 Ionic 和 Angular 的混合应用,并想方设法地帮助客户将之与 React Native 相结合。在完成了嵌入 WebView 后,重写插件等一系列工作后,便想记录一下这个过程中遇到的坑。 平滑地演进 如我在开头所说,在有足够人力和物力的情况下,最好的方式就是在重写应用。 一来,应用在其生命周期里,经过了不同的开发人员、不同的业务变更,必然有大量的遗留代码
Phodal
2018/01/29
5K0
Sass占位符
在Sass中,我们引入了占位符“%placeholder”来进一步优化“@extend”。我们先来看一个例子。
Qwe7
2022/05/14
1.2K0
commons-configuration2提供的变量占位符(Variable Interpolation)功能
通常我们用apach的configuration2库来管理配置文件(org.apache.commons:commons-configuration2),在commons-configuration2管理的配置文件中,配置变量的值可以引用变量。 比如以下的配置文件中使用的${env:FACELOG_HOME}就指代环境变量FACELOG_HOME,${sys:user.home}指代java的user.home属性:
10km
2020/06/24
1.4K0
原 状态机 搜索字符串中的特定占位符
问题:xz[[cenvENVzxcENV[      fffff  ]dsbgENV[fecccccc]nqe  W3]NBENV[]ZXC   这个字符串中总共有三个变量区,规定ENV[]  方括号中间包含的即是变量,那么使用的过程中需要找到这个变量在替换。 使用状态机首先需要定义系统的状态的个数及状态之间的转换过程及条件 本例中总共定义了6种状态 common char:普通字符串 env:变量内容 over:状态机终止(字符串超长)  maybe:可能属于变量 maybeOver:后面紧跟
魂祭心
2018/05/17
3.4K0
SQL注入、占位符拼接符
所谓SQL注入,就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令。具体来说,它是利用现有应用程序,将(恶意的)SQL命令注入到后台数据库引擎执行的能力,它可以通过在Web表单中输入(恶意)SQL语句得到一个存在安全漏洞的网站上的数据库,而不是按照设计者意图去执行SQL语句。
小马哥学JAVA
2022/11/21
2.3K0
golang-占位符
Printf 格式化输出 通用占位符: v 值的默认格式。 %+v 添加字段名(如结构体) %#v  相应值的Go语法表示 %T 相应值的类型的Go语法表示 %% 字面上的百分号,并非值的占位符  布尔值: %t true 或 false 整数值: %b 二进制表示 %c 相应Unicode码点所表示的字符 %d 十进制表示 %o 八进制表示 %q 单引号围绕的字符字面值,由Go语法安全地转义 %x 十六进制表示,字母形式为小写 a-f %X 十六进制表示,字母形式为大写 A-F %U Unicode格式:U+1234,等同于 "U+%04X" 浮点数及复数: %b 无小数部分的,指数为二的幂的科学计数法,与 strconv.FormatFloat中的 'b' 转换格式一致。例如 -123456p-78 %e 科学计数法,例如 -1234.456e+78 %E 科学计数法,例如 -1234.456E+78 %f 有小数点而无指数,例如 123.456 %g 根据情况选择 %e 或 %f 以产生更紧凑的(无末尾的0)输出 %G 根据情况选择 %E 或 %f 以产生更紧凑的(无末尾的0)输出 字符串和bytes的slice表示: %s 字符串或切片的无解译字节 %q 双引号围绕的字符串,由Go语法安全地转义 %x 十六进制,小写字母,每字节两个字符 %X 十六进制,大写字母,每字节两个字符 指针: %p 十六进制表示,前缀 0x 这里没有 'u' 标记。若整数为无符号类型,他们就会被打印成无符号的。类似地,这里也不需要指定操作数的大小(int8,int64)。 对于%v来说默认的格式是: bool: %t int, int8 etc.: %d uint, uint8 etc.: %d, %x if printed with %#v float32, complex64, etc: %g string: %s chan: %p pointer: %p 由此可以看出,默认的输出格式可以使用%v进行指定,除非输出其他与默认不同的格式,否则都可以使用%v进行替代(但是不推荐使用)
nbsp-nbsp
2020/09/22
1.7K0
配置文件或者模板中的占位符替换工具类
有时候,很多文本存入数据库或者文件中,某些变量或者模板中会存在占位符的情况,然而每次读取,一个个去字符串.replace去替换就很麻烦,于是写个占位符替换工具类
执笔记忆的空白
2020/12/25
1.9K0
【Python】字符串 ③ ( Python 字符串格式化 | 单个占位符 | 多个占位符 | 不同类型的占位符 )
在上一篇博客 【Python】字符串 ② ( 字符串拼接 | 字符串与非字符串不能直接拼接 | TypeError: can only concatenate str (not “int“) to str ) 中 , 介绍了 使用 + 运算符拼接字符串 的方法 , 该方法有一定的弊端
韩曙亮
2023/04/08
1.6K0
【Python】字符串 ③ ( Python 字符串格式化 | 单个占位符 | 多个占位符 | 不同类型的占位符 )
点击加载更多

相似问题

如何在Django中替换占位符(变量)中的占位符?

111

选择react中的元素占位符

13

UIAlertView中变量的占位符?

20

带占位符的Psycopg2插入到表中

33

如何在react中显示json占位符api的post标题

15
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档