javascript - 在 JSX 参数中 react 渲染组件

Question

我有一个翻译系统，可以根据键返回正确的翻译。而这一切都由组件翻译处理:

import React from 'react';

const Translate = ({ ln }) => {

    return <span>{language[ln]}</span>
};

export default Translate;

问题是当我尝试在一个例子中使用它时:

<input type="text" placeholder=<Translate ln="text_input" /> />

问题是组件没有返回 - 当我将它插入 <input /> 时执行，这意味着我的占位符将永远是 [object Object]，有什么办法可以解决这个问题吗？

Answer 1

你不能传递给 placeholder React 组件，因为传递给 placeholder 你应该传递 String 而不是 Object或 String 即 contains tags ., 我认为在这种情况下最好将 Translate 拆分成耦合函数，并在 Translate 组件中使用它，并且只是一个通过键返回正确翻译的函数，就像这样

const translate = (key) => {
  // Some code ... 
  return language[ln];
}; // returns string

const Translate = ({ ln }) => {
  return <span>{ translate(ln) }</span>
}; // return React component

<input 
  type="text" 
  placeholder={ translate('some key') } /> // pass string to placeholder