Question

我试图使用jQuery库（Highcharts）在React组件中呈现数据。

据我所知，我需要将jQuery代码放在componentDidMount（）函数中以使其正确运行。它确实存在，只要我在componentDidMount（）方法中包含静态数据。

但是我想将jQuery代码挂钩到我的数据库，以便图表被反应。我读到componentDidMount（）只运行一次，所以我怀疑我将无法在其中放置反应数据（我甚至无法获取道具来登录控制台......它们总是未定义）。

我能够将props传递给componentDidUpdate（），但之后我的jQuery代码无法显示。

任何人都有解决方案吗？

谢谢！

Answer 1

您可以使用Highcharts提供的.setData方法。每次收到新道具时都可以更新数据。这是一个非常基本的例子：

class Chart extends React.Component {
  constructor() {
    super();
    // Init state.
    this.state = { chart: {} };
  }
  componentDidMount() {
    const _this = this;
    // Init chart with data from props.
    var chart = Highcharts.chart('chart', {
      series: [{ data: _this.props.data }]
    });
    // Save the chart "container" in the state so we can access it from anywhere.
    this.setState({ chart });
  }
  componentWillReceiveProps(props) {
    // Update the chart with new data every time we receive props.
    this.state.chart.series[0].setData(props.data);
  }
  render() {
    return <div id="chart" />;
  }
}

class App extends React.Component {
  constructor() {
    super();
    // Set some initial data.
    this.state = { data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]};
    this.changeData = this.changeData.bind(this);
  }
  changeData() {
    // Update with a different dataset.
    this.setState({
      data: [129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4],
    });
  }
  render() {
    return(
      <div>
        <button onClick={this.changeData}>Change Data</button>
        <Chart data={this.state.data} />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('View'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="View"></div>

Answer 2

我可以在这里看到您有两个问题。 1. How to pass context(this) of componentDidMount to the HighCharts function ? 2. Would it update every time there's any change in the props ?

您只需将上下文存储在变量中，然后将该上下文传递到Highcharts函数中即可，该函数将为您提供 that.props ，而不是使用“ this”检查道具   例如。

class YourComponent extends React.Component {
    state = {
        chatData: []
    }
    componentDidMount () {
        let that = this;
        // Highcharts function () {
        // pass that.props
        // }
    }
}

不，您的道具每次更改都不会更新。

为此，您可以使用 getDerivedStateFromProps ，我建议您带一些备注。

// seed the state with props data
getDerivedStateFromProps (props, state) {
    // Check props data and state are same
    this.setState({chartsData: props.data});
}

或者您可以直接播种状态，或者甚至不需要设置状态，只需将props直接传递给函数。


state = {chartData: this.props.data};


render () {
    // Highcharts function () {
    // pass this.props or this.state
    // }
}

您不应在 render 中声明函数，因为每次组件渲染时都会为其创建新的副本，但在这种情况下，每次道具更改时都需要更改状态或数据

将道具传递给React组件中的componentDidMount（）

2 个答案: