javascript - 在单独的文件中访问 React 组件的 props

Question

我有两个 react 组件，它们必须保留在单独的文件中，但需要共享属性。一个组件将更改 this.props.color，而另一个组件需要知道新颜色是什么。我知道您可以导入实际的组件，但我不知道如何访问该组件的属性。这是我的应用程序的一个非常简单的示例(我使用的是 ES6)

组件1.js

import React, {Component, PropTypes} from 'react';

export default class FirstComponent extends Component {
  static propTypes = {
    color: PropTypes.string
  }
  handleClick () {
    //change color here
  }
  render () {
    var styles = {
      backgroundColor: this.props.color
    };
    return <div id="one" style={styles} onclick={this.handleClick}></div>;
  }
}

组件2.js

import React, {Component} from 'react';
import FirstComponent from './component1.js';

export default class SecondComponent extends Component {
  /*...*/
  render () {
    console.log(FirstComponent); //??
    return <div id="two"></div>;
  }
}

parent1.js

import React, {Component} from 'react';
import FirstComponent from './component1.js';

export default class FirstComponentParent extends Component {
  color = 'rgb(255, 0, 0)';
  return React.createElement(FirstComponent, {color: this.color});
}

parent2.js

import React, {Component} from 'react';
import SecondComponent from './component2.js';

export default class SecondComponentParent extends Component {
  return React.createElement(SecondComponent);
}

Answer 1

您使用一个公共(public)父组件，并将颜色作为 Prop 传递给第二个组件，并将更新颜色的方法作为 Prop 传递给第一个组件。

import React, {Component, PropTypes} from 'react';

export default class FirstComponent extends Component {
  constructor() {
    super();
    this.state = {color: 'black'};
  }
  handleClick () {
    //change color here
    this.props.changeColor(newColor);
  }
  render () {
    var styles = {
      backgroundColor: this.state.color
    };
    return <div id="one" style={styles} onclick={this.handleClick}></div>;
  }
}

import React, {Component, PropTypes} from 'react';

export default class SecondComponent extends Component {
  render () {
    var styles = {
      backgroundColor: this.props.color
    };
    return <div id="one" style={styles}></div>;
  }
}

import React, {Component, PropTypes} from 'react';
import FirstComponent from './first';
import SecondComponent from './second';

export default class ParentComponent extends Component {
  constructor() {
    super();
    this.state = {firstColor: 'black'};
  }
  changeColor = (newColor) => {
    this.setState({firstColor: newColor});
  }
  render () {
    return (
      <div>
        <FirstComponent changeColor={this.changeColor}/>
        <SecondComponent color={this.state.firstColor}/>
      </div>;
    )
  }
}