无法将所需属性添加到R​​eactJS输入组件

Question

我正在尝试将一个必需属性添加到反应输入组件：

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

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

<UiInput 
   required={required}
  />

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

Answer 1

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

当您执行此操作时，您用于Component的模式是无状态功能组件：

• props作为参数传递。
• 您不需要声明render()方法，只需编写返回语句。

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

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

并像这样呈现：

<UiInput required="required" />

您可以看到JSFiddle here。请注意，为了演示，我确实删除了一些props。

这是呈现的组件，请忽略data-reactroot属性。