如何将父组件状态数据以变量的形式传递给子组件

Question

我有一个父组件（index.js），它有一个状态x:[]，状态包含数据[{…}, {…}, {…}]&我有一个子组件（child.jsx），在子组件（child.jsx）中，我想将父组件数据保存[{…}, {…}, {…}]在一个变量中在子组件中。父组件（index.js）//here i have more importsimport Child from "./child"export default class Index extends Component {    constructor(props) {        super(props);        this.state = {              x: [],          };    }//some functionsrender() {    const { x } = this.state;    console.log(x, "this is the data")        // x contains data [{…}, {…}, {…}]          return (           <div className="class">                                                             <Autocomplete x={this.state.x} />               </div>            }}子组件（child.jsx）//here i have importsconst suggestions =  here i want x data from the parent component;//some functionsexport default function Child(props) { return (    <div className="material">      <div className={classes.root}           <Autosuggest          {...props.x}        />      </div>    </div>  );}当我尝试传递一些道具时，主要是出现未定义的错误。预期结果："x data from the parent component" const suggestions = [{…}, {…}, {…}];

Answer 1

您无法访问其范围之外的任何组件的 props，因此发送到 child 的 props 只能在子组件内部访问，而不是在所有文件中，因为同一文件中可能有多个子组件。

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>

  );

}

Answer 2

您将建议置于功能组件的范围之外，因此您无法访问 props。

您需要在 Child 中移动建议：

export default function Child(props) {

const suggestions =  props.x;

 return (

    <div className="material">

      <div className={classes.root}   

        <Autosuggest

          {...props.x}

        />

      </div>

    </div>

  );

}

我假设你从父组件渲染子组件，并给了他道具 x。

Answer 3

您应该将数据（道具）从父组件传递给当前组件，然后再次将其传递给子组件，或者您可以简单地使用上下文系统 阅读上下文

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

我希望你得到这个想法并为你工作