无法引用父组件数据对象：子组件Props无自动补全问题求助

你遇到的问题是：子组件中能正常获取Props传递的JSON数据，但编辑器无法自动补全Props或JSON对象的属性。

父组件代码 #

export default function SproutStudioSvgContainer() {

const initialCanvasDataModel = {
    "data": {}
}

// const [canvasDataModel, dispatchCanvasDataModel] = useReducer(SproutReducer, initialCanvasDataModel);

// Utility: getCanvasRootNodeFromUrl()
// This will either be a userId or branchId
const [canvasRootNode, setCanvasRootNode] = useState({ nodeId: '1' });
const [windowRootNode, setWindowRootNode] = useState({ nodeId: '1' });
const [allowedBloomLevel, setAllowedBloomLevel] = useState(3);

return (
    < Fragment >
        <svg id='sprout-root-svg' height='100%' width='100%' viewBox='0 0 1000 1000'>
            <g id='root-node-container'>
                {/* Positioned by default to the bottom-center of the SVG canvas. */}
                <g id='root-sprout-node'>
                    <RootContainer myData={initialCanvasDataModel} />
                </g>
            </g>
        </svg>
    </Fragment >
  )
}

子组件代码 #

const RootContainer = (props) => {
let s = props.myData
console.log(s) // 返回JSON数据但无法自动补全属性
console.log(props) // 返回传入的props，但无法自动补全任何属性

return (
    <Fragment>
        {/* <RootNode
            // title={rootNodeTitle} nodeId={props.nodeId}
            nodeType='root'
            x={props.initialCanvasDataModel}
            y={props.y}
            height={props.height}
            width={props.width}
        /> */}
        {/* <CollectionNodeContainer branchId={props.branchId} /> */}
        {/* <SubBranchesContainer
            parentNodeId={props.nodeId}
            canvasDataModel={props.canvasDataModel}
        /> */}
    </Fragment>
  )
}

export default RootContainer;

解决方法 #

方法1：用JSDoc标注类型（无需切换到TypeScript）

给子组件的props和数据对象添加类型注释，让编辑器能识别结构：

/**
 * @typedef {Object} CanvasDataModel
 * @property {Object} data - 可根据实际数据结构细化该属性
 */

/**
 * @typedef {Object} RootContainerProps
 * @property {CanvasDataModel} myData - 传递给子组件的数据
 */

/**
 * @param {RootContainerProps} props
 */
const RootContainer = (props) => {
let s = props.myData
console.log(s.data) // 现在可自动补全data属性
console.log(props) // props的myData属性也会有提示

return (
    <Fragment>
        {/* ... 原有代码 ... */}
    </Fragment>
  )
}

export default RootContainer;

同时给父组件的变量添加类型注释，强化推断准确性：

/** @type {CanvasDataModel} */
const initialCanvasDataModel = {
    "data": {}
}

方法2：切换到TypeScript（推荐长期项目）

如果项目支持迁移到TypeScript，直接定义接口即可实现精准的自动补全：

// 定义数据结构接口
interface CanvasDataModel {
  data: Record<string, any>; // 根据实际数据替换为具体类型
}

// 定义子组件Props接口
interface RootContainerProps {
  myData: CanvasDataModel;
}

const RootContainer = (props: RootContainerProps) => {
  let s = props.myData;
  console.log(s.data); // 自动补全生效
  console.log(props.myData); // props属性也有提示

  return (
    <Fragment>
      {/* ... 原有代码 ... */}
    </Fragment>
  );
};

export default RootContainer;

父组件中给变量标注类型：

const initialCanvasDataModel: CanvasDataModel = {
  data: {}
};

通过以上两种方式，编辑器就能准确识别Props和数据对象的结构，提供正常的自动补全功能。

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