Question

我正在尝试将宽度的props从父组件传递到子JS文件，但似乎无法在子JS文件中获取props值。父级如下：

import React from 'react';
import Child from './Child';
export default class Home extends React.Component {

    state = {
        width: 1000
    }

    render(){

        return(
            <div>
                <Child width={this.width} />
            </div>
        );
    }
}

单独的子JS文件如下：

import React from 'react';
const svgWidth = 650, // Load prop here
      svgHeight = 340;

以下是我尝试过的方法，但对我不起作用：

import React from 'react';
const Child = (props) => {

    console.log({props.width}); // Getting an error that ',' is expected

    return {props.width};
}

有人可以帮我传递来自的宽度值吗？

Answer 1

更改为以下内容，因为您应该通过this.state访问状态，如下所示：

<Child width={this.state.width} />

Answer 2

使用prop钻孔，因此将值从父级传递到子级作为prop。但是，您的问题的确切答案将是：在单独的js文件中创建一个空白对象并将其导出，然后在componentDidMount中使用要保存的道具填充该对象。下次当您将要在普通js文件中的任何位置使用该对象时，您将获得道具。

Answer 3

如果您打算将 props 传递给子组件，那么我将从以下内容开始：

import React from 'react';
import Child from './Child';
export default class Home extends React.Component {
  constructor(props) { // don't forget to add a constructor
    super(props); // also required
    this.state = {
      width: 1000
    }
  }
    
  render(){
    // to pass state use {this.state}
    return(
      <div>
        <Child width={this.state.width} /> 
      </div>
    );
  }
}

然而，如果情况并非如此，而是您想将状态导出到单独的 js 文件（甚至可能不是 React 组件），那么您可能需要查看导出语法。我现在正在努力解决类似的问题，我已经尝试了 Vikash Kumar 的建议，但没有成功。这在这个问题上有解释，但我也没有成功使用这种方法：export function inside react component or access state in same file outside of component

将React Props传递到Separete JS文件

3 个答案: