javascript - 无法将必需的属性添加到 ReactJS 输入组件

Question

我正在尝试向 React 输入组件添加一个必需的属性:

export default function UiInput() {
   render() {
   return (
    <input
     {...customAttributes}
     size={size ? size : null}
     value={inputValue}
     maxLength={maxLength}
     required={required}
    />
   )

当我这样调用我的组件时，

<UiInput 
   required={required}
  />

我没有让红色星号呈现 - 当我将 required 传递给输入组件时没有收到任何错误，但没有显示红色星号，我如何确保星号呈现所需的输入？ ReactJS 不支持这个吗？

Answer 1

请记住，您将 required 作为 prop 传递给 UiInput。

当您这样做时，您为组件使用的模式是无状态功能组件:

• props 作为参数传递。
• 您不需要声明 render() 方法，只需简单地编写您的 return 语句即可。

您可以像这样声明您的组件:

function UiInput(props) {
      return (
        <input
         size={props.size ? props.size : null}
         required={props.required}
        />
      )
    }

然后像这样渲染它:

<UiInput required="required" />

你可以看到一个JSFiddle here .请注意，出于演示目的，我确实删除了一些 props。

这是渲染的组件，请忽略 data-reactroot 属性。