Question

我有两个组件 App 和 SomeComponent 。

我想从 SomeComponent 获取 App 中的访问变量。

应用：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

var places = [];

class App extends Component {

  state = {isLoading:true}
   render(){
bla-bla...}
}

export default App;

SomeComponent ：

import React from 'react'
import App from '../App'

class SomeComponent extends React.Component {
  componentDidMoint(){
    console.log('Check access places array',App.places)
  }
  render(){
    bla-bla...

  }
}

export { SomeComponent }

但是它咳出的地方是未定义，而不是显示空数组。这里怎么了？
是的，我尝试了各种变体...但是没有成功。谢谢！

Answer 1

在React中将数据从父组件传递到子组件的方法是通过props。您可以例如将数组作为places属性传递到Child组件，并从this.props访问它。

示例

class App extends React.Component {
  state = { isLoading: true, places: ['foo', 'bar'] }

  render() {
    return <Child places={this.state.places} />
  }
}

class Child extends React.Component {
  componentDidMount() {
    console.log('Check access places array', this.props.places)
  }
  render() {
    return <div>Child</div>
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer 2

不要将App导入Child。在App中，使用带有JSX的React的render方法来声明child的实例。在App的Child JSX中，该属性将在Child中作为“ props”可用。参见https://reactjs.org/docs/components-and-props.html，React期望其编程结构不像纯JS那样“免费”，但是React然后提供了一种简洁，集成的方式来制作小部件和SPA。

Answer 3

您需要通过App render() { let bigCalEvents = this.props.events.map(e => <big cal event>); .... }放置

data() {
    form: {
        countryCode: 'US' // as default
    },
    countryCodeOptions: {
        US: 'United States', 
        MX: 'Mexico', 
        CA: 'Canada', 
        FR: 'France', 
        GB: 'Great Britain',
        NZ: 'New Zealand'
    },
    allowedDestinations {
        US: [ {US: 'UnitedStates', MX: 'Mexico', CA: 'Canada'} ],
        GB: [ {DE: 'Germany', GB: 'Great Britain'}]
    }
},
computed: {
    destinations() {
      return this.allowedDestinations[this.form.countryCode];
    }
}

还有child.app

export

访问组件之间的变量

3 个答案: