无法添加所需的属性到ReactJS输入组件

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。

您正在使用您的组件的模式是一个无状态的功能组件，当你这样做：

• 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属性。