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

Question

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

我有一个负责翻译的react组件（以下是super-simplified版本）：

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 组件，以便我可以向它传递一个回调函数来操作翻译后的字符串。此函数需要将 parent 组件中设置的一些参数和 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>
  );
}

我们创建一个函数，returns 通过获取一个字符串作为回调函数。然后您可以根据需要在 Translation

中创建回调函数

return <p>{callback ? callback(getTranslatedString())() : getTranslatedString()}</p>

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

Passing a callback function with arguments coming from different components as a prop

javascript

callback

reactjs