Javascript 如何将父组件状态数据传递给变量中的子组件

我有一个父组件（index.js），它有一个状态

x:[]

，状态包含数据

[{…}，{…}，{…}]

&我有一个子组件（child.jsx），在子组件（child.jsx）中，我想在子组件的变量中保存父组件数据

[{…}，{…}，{…}，{…}]

父组件（index.js）

---

您将建议放在功能组件的范围之外，因此无法访问道具。
您需要将建议移到子组件中：

export default function Child(props) {

const suggestions =  props.x;

 return (
    <div className="material">
      <div className={classes.root}   
        <Autosuggest
          {...props.x}
        />
      </div>
    </div>
  );

}

导出默认函数子项（道具）{
const suggestions=props.x；
返回(
您无法访问其作用域之外的任何组件的道具，因此只能在子组件内部而不是在所有文件中访问道具发送到子组件，因为同一文件中可能有多个子组件

Either use let like this: 


    let suggestions;
    //some functions

    export default function Child(props) {
    suggestions = props.x;
     return (
        <div className="material">
          <div className={classes.root}   
            <Autosuggest
              {...props.x}
            />
          </div>
        </div>
      );

    }


Or


export default function Child(props) {

const suggestions = props.x;
 return (
    <div className="material">
      <div className={classes.root}   
        <Autosuggest
          {...props.x}
        />
      </div>
    </div>
  );

}

可以这样使用let：
提出建议；
//一些功能
导出默认函数子项（道具）{
建议=道具x；
返回(
您应该将数据（道具）从父组件传递到当前组件，然后再次传递给子组件，或者您可以简单地使用上下文系统

上下文旨在共享可被视为React组件树的“全局”数据

我希望您能理解这个想法并为您工作
您在Parent中导入了Child，但却从未对它做过任何事情，是否缺少一些代码？您的意思不是
，而是
。不，这是material.ui组件。谢谢，当我尝试您的方法时，让suggestions=props.x；console.log（suggestions，“这就是建议”）；则建议未定义，无法获取数据。是否从索引组件中呈现子组件？
"x data from the parent component" 
const suggestions = [{…}, {…}, {…}];

export default function Child(props) {

const suggestions =  props.x;

 return (
    <div className="material">
      <div className={classes.root}   
        <Autosuggest
          {...props.x}
        />
      </div>
    </div>
  );

}

Either use let like this: 


    let suggestions;
    //some functions

    export default function Child(props) {
    suggestions = props.x;
     return (
        <div className="material">
          <div className={classes.root}   
            <Autosuggest
              {...props.x}
            />
          </div>
        </div>
      );

    }


Or


export default function Child(props) {

const suggestions = props.x;
 return (
    <div className="material">
      <div className={classes.root}   
        <Autosuggest
          {...props.x}
        />
      </div>
    </div>
  );

}