Question

我是React的新手，非常感谢有关如何以Reacty方式构建应用程序的建议。

我正在使用以下组件构建交互式：

<text input 1> - when user inputs data here, chart 1 updates
<chart 1>
<text input 2> - when user inputs data here, chart 2 updates
<chart 2>
<text input 3> - when user inputs data here, chart 3 updates
<chart 3>
<final chart> - should render automatically when user has input data into all three text fields

我最初的想法是创建一个TextChart子组件：

class TextChart extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    event.preventDefault();
    this.setState({ value: this.element.value });
    this.renderChart();
  }

  renderChart() {
    // creates chart based on props.data and state.value
  }

  render() {
    return (
      <div>
      <form onSubmit={this.handleSubmit}>
        <input type="text" ref={el => this.element = el} />
        <input type="submit" value="Show" />
      </form>
      <svg id={this.props.name} width="500" height="300"></svg>
      </div>
    );
  }
}

然后调用这三次，用每个图表的数据进行初始化：

ReactDOM.render(
  <WealthInput name="textchart1" data=data />,
  document.getElementById('textchart1')
);
ReactDOM.render(
  <WealthInput name="textchart2" data=data />,
  document.getElementById('textchart2')
);
ReactDOM.render(
  <WealthInput name="textchart3" data=data />,
  document.getElementById('textchart3')
);

但是现在我在解决如何创建最终图表方面遇到了问题。它取决于每个TextChart组件中设置的值，并且应在设置所有三个组件时自动呈现。但是，这些值是在子组件的本地状态中设置的，而不是应用程序的全局支持。

似乎在React中，通常不可能在子组件中设置全局道具。

我应该如何创建最终图表？一旦在TextChart中设置了所有三个值，它就会自动渲染。

如何构建此React应用程序？

0 个答案: