Question

我有一个父组件（index.js），其状态为x:[]，并且状态包含数据[{…}, {…}, {…}]；在子组件（child）中，我有一个子组件（child.jsx）。 jsx）我想将父组件数据[{…}, {…}, {…}]保存在子组件的变量中。

父组件（index.js）

//here i have more imports
import Child from "./child"

export default class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {  
            x: [],  
        };
    }

//some functions

render() {

    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 imports

const suggestions =  here i want x data from the parent component;

//some functions

export 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

您将建议放置在功能组件的范围之外，因此您无法访问道具。
您需要将建议移入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 2

您无法访问其作用域之外的任何组件的道具，因此只能在子组件内部而不是在所有文件中访问发送给孩子的道具，因为同一文件中可能有多个子组件。

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 3

您应该将数据（属性）从父级传递到当前组件，然后再次将其传递给子级，或者您可以简单地使用上下文系统 Read about context

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

希望您能理解并为您工作

如何通过变量将父组件状态数据传递给子组件

3 个答案: