Как я могу вставить переменную из контекстного API React в заполнитель? - PullRequest
Новая
       18

Как я могу вставить переменную из контекстного API React в заполнитель?

0 голосов
/ 02 февраля 2019

Я использую React Context API для отображения моего сайта на нескольких языках.Все работает должным образом, за исключением того, когда я пытаюсь вставить заполнитель в текстовую область. Он отображает [object Object].Если я использую тот же компонент в моем фактическом, например, тегах

, он отображается правильно!

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;

Компонент для перевода выглядит следующим образом: 

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>
    );
  }
}

Кто-нибудь может увидеть, что я делаю неправильно?

Спасибо!

Ответы [ 2 ]

0 голосов
/ 02 февраля 2019

Просто чтобы расширить ответ Estus , просто создайте отдельную функцию, которая принимает языки, значение языка и строку (как вы делаете это в компоненте Translate в методе render)и использовать его везде, где вам нужно.

Вы отделяете контекст от фактической функциональности и можете повторно использовать функцию следующим образом: (или в любых других компонентах, где у вас есть доступ к контексту). 

// 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>
0 голосов
/ 02 февраля 2019

<Translate string={'submitbox.copy-and-paste'}/> - это элемент React, который является объектом.Он не может быть предоставлен как атрибут placeholder, поскольку ожидается строка.

FormEntry компонент может использовать contextType для доступа к контексту.Это ограничивает компонент для использования одного контекста.

...