建议我一些关于使用反应点符号的文本输入的想法

Posted 2023-04-18

【中文标题】建议我一些关于使用反应点符号的文本输入的想法

【英文标题】：Suggest me some ideas on Text input using react dot notation

【发布时间】：2021-05-25 23:53:10

【问题描述】：

如何使用 react dot notation 编写文本输入组件？

例如。我想在功能组件中这样访问它。

<TextInput.Label></TextInput.Label>

【参考方案1】：

你应该这样做：

import React from 'react';

const TextInput = (children) => 
  return (
      <div>
        children
        <input />
      </div>
  );
;

TextInput.Label = () => <p>Label</p>

export default TextInput;

用法如下：

<TextInput>
  <TextInput.Label />
</TextInput>

编辑：

用于添加前缀和后缀：

import React from 'react';

const TextInput = (children) => 
  return (
      <div>
        children
        <input />
      </div>
  );
;

TextInput.Label = (prefix, suffix) => 
  return(
    <>
      <p>prefix</p>
      <p>Label</p>
      <p>suffix</p>
    </>
  )


export default TextInput;

用法：

<TextInput>
   <TextInput.Label prefix="prefix" suffix="suffix" />
</TextInput>

【讨论】：

如果我想在输入字段中添加前缀或后缀怎么办？

@Sowmya 我更新了上面的答案。如果您认为正确，请采纳答案！

我想将后缀或前缀添加到输入而不是标签。

好的，只需将前缀和后缀传递给输入组件：

@Sowmya and const TextInput = (prefix, suffix ) => return ( children ); ;