Question

使用react-18next我必须像这样包装组件

export default translate(['common', 'user', 'validation'], {wait: true})(MyComponent);

但是antdesign形式已经包装了组件 https://ant.design/components/form/

const WrappedNormalLoginForm = Form.create()(NormalLoginForm);

ReactDOM.render(<WrappedNormalLoginForm />, mountNode);

所以我想以antdesign形式使用react-18next，我确实是这样

export default translate(['common', 'user', 'validation'], {wait: true})(Form.create()(LoginForm));

我得到了这个错误（打字稿）

TS2559: Type '{ onSubmit: (username: any, password: any) => void; clearError: () => void; isProcessing: ...' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<Pick<Pick<any, never>, never> & Translat...'.

LoginForm.ts

interface Props {
  onSubmit(username, password);
  clearError;
  isProcessing;
  form;
  error;
  t?;
}

class LoginForm extends React.Component<Props, any> {}

您能帮我解决这个问题吗？非常感谢！

Answer 1

您可以使用recompose软件包。

https://github.com/acdlite/recompose

然后执行以下操作：

import { compose} from 'recompose'

{...}

export default compose(translate(['common', 'user', 'validation'], {wait: true}))(Form.create()(LoginForm));

Answer 2

没有任何软件包，您可以通过导入以下代码来实现：

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js">
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1
/mark.min.js"></script>


<div class="input-wrap">

  <label>

    Search Titles: 

    <input id="myInput" type="text" required

           placeholder="Search Titles" />

  </label>

</div>



<div class="hintsWrap">

  <p id="noMatches"></p>

  <p class="hints">

    Hints: type "not working", "working" ...

  </p>

</div>



<table id="myTable" style="width: 100%" class="style1">

  <tr>

    <td>

    <table><tr><td>not working</td></tr></table>  

    </td>

  </tr>

  <tr>

    <td>

    working

    </td>

  </tr>

</table>

然后像这样导出组件：

import { withTranslation } from 'react-i18next'

将react-i18next与ant设计一起使用

2 个答案: