将来自不同组件的参数作为 prop 传递回调函数

Question

我知道标题不是很清楚，所以也许一个简化的例子会有所帮助。

我有一个负责翻译的反应组件（以下是一个超级简化的版本）：

const data = {
  foo: {
    en: 'hello',
    es: 'hola'
  },
  bar: {
    en: 'world',
    es: 'mundo'
  }
  baz: {
    en: 'the answer is {PLACEHOLDER}',
    es: 'la respuesta es {PLACEHOLDER}'
  }
}

const Translation = ({strKey, param, lang}) => {
  const getTranslatedString = () => {
    const translation = data[strKey][lang]
    return (translation.indexOf('{PLACEHOLDER}') > -1 && param)
      ? translation.replace('{PLACEHOLDER}', param)
      : translation
  }
  
  return <p>getTranslatedString()</p>
}

Translation.defaultProps = {
  lang: 'en'
}

export default Translation;

我使用它如下：

<Translation strKey='baz' param={42} /> // renders as <p>the answer is 42</p>
<Translation strKey='baz' param={42} lang='es' /> // renders as <p>la respuesta es 42</p>

现在我必须修改我的 Translation 组件，以便我可以向它传递一个回调函数来操作翻译后的字符串。该函数需要将父组件中设置的一些参数以及 Translation 组件本身中设置的字符串作为输入。这就是我陷入困境的地方，因为我很难理解如何处理来自两个不同组件的参数：

const data = {
  foo: {
    en: 'hello#world',
    es: 'hola#mundo'
  }
}

// utility string manipulation function that will be used as callback
function getStringChunk(str, index) {
  return str.split('#')[index];
}

// Modified `Translation` component
const Translation = ({strKey, param, lang, callback}) => {
  const getTranslatedString = () => {
    const translation = data[strKey][lang]
    return (translation.indexOf('{PLACEHOLDER}') > -1 && param)
      ? translation.replace('{PLACEHOLDER}', param)
      : translation
  }
  
  return <p>{callback ? callback(getTranslatedString()) : getTranslatedString()}</p> // `callback` could be any function with any number of additional arguments 
}

const ParentComponent = ({isFirst}) => {
  return (
    <Translation
      strKey='foo'
      callback={() => {
        const index = isFirst ? 0 : 1;
        getStringChunk(index) // the function expects a first `str` argument but that is set inside the Translation component itself
      }}
    /> // should render either <p>hello</p> or <p>world</p>, depending on the value of `isFirst`
  );
}

我很确定我缺少一些非常基本和基本的东西，这些东西会让我觉得自己是个十足的白痴一旦有人指出解决方案，但我有某种“思维障碍”，我在原地打转却找不到解决方案。

提前致谢。

Answer 1

也许你可以尝试这样的事情，

const ParentComponent = ({isFirst}) => {
  return (
    <div>
    <Translation
      strKey='foo'
      lang={'en'}
      callback={(mystr) => () => {
        const index = isFirst ? 0 : 1;
        return getStringChunk(mystr,index)
      }}
    /> 
    </div>
  );
}

我们创建一个通过接受字符串返回回调函数的函数。
那么您可以根据需要在 Translation

return

{callback ?回调(getTranslatedString())() : getTranslatedString()}