React中如何获取组件实例子元素的placeholder属性并使用

实现方案 #

你原有写法的核心问题有两个：

1. React中的children是虚拟DOM对象，不是真实DOM节点，不能调用getAttribute方法，所有属性都存储在元素的props字段下
2. 直接对children调用map方法存在兼容性问题：如果只有一个子元素时children不是数组类型，需要用React内置的React.Children.map工具处理；另外你原代码的map回调没有返回值，无法渲染内容

正确组件实现代码

import React from 'react'

function Namer({children}){
    return <div>
        {React.Children.map(children, child => {
            // 先判断是合法React元素，再取placeholder，避免非元素子节点报错
            if (React.isValidElement(child) && child.props.placeholder) {
                return <>
                    <label>{child.props.placeholder}</label>
                    {child}
                </>
            }
            // 不符合条件的子元素直接返回
            return child
        })}
    </div>
}

调用方式和你原有写法一致

<Namer>
    <input placeholder="firstname" type="text"/>
</Namer>

如果需要处理嵌套子元素的场景，还可以递归遍历child.props.children做深层属性获取。

内容的提问来源于stack exchange，提问作者Abraham