为什么 twitter 小部件不重新渲染 reactjs

Question

我在我的应用程序中使用 twitter 嵌入时间线来显示公司 twitter 帐户的 twitter 提要。

当我从 API 获得结果时，状态更改为正确的值，但 twitter 小部件似乎没有改变

TwitterCard.js

import React from "react";

export class TwitterCard extends React.Component{
    render() {
        return (
            <a className="twitter-timeline" href={this.props.href} data-height="100%">Tweets by {this.props.ticker}</a>
        )
    }
}

我附上了 React 插件输出的屏幕截图，以证明状态变化。

父类比较大，所以我贴出了渲染方法：

render() {
        return (
            <div>
                <NavBar/>
                <div className="container-fluid">
                    <div className="row">
                        <NavBarSide clickHandler={(url) => this.handleNavClick(url)}/>
                        <Dashboard
                            errorChart={this.state.errorChart}
                            twitter={this.state.twitter}
                            status={this.state.status}
                        />
                    </div>
                </div>
            </div>
        )
    }

父级将这些值传递给仪表板：

import React from "react";

import { Switch, Route } from 'react-router-dom';
import { Chart } from "./Chart";
import { TwitterCard } from "./TwitterCard";


export class Dashboard extends React.Component {

    render() {
        return (
            <div className="col-md-9 ml-sm-auto col-lg-10 pt-2 px-3">
                <div className="row">
                    <div className="col-lg-8">
                        <div className="row">
                            <div className="col-lg-6">
                                <div className="card border-0">
                                    <div className="card-body">
                                        <Chart chart={this.props.errorChart}/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="col-lg-4">
                        <TwitterCard href={this.props.twitter} ticker={this.props.ticker}/>
                    </div>
                </div>
            </div>
        )
    }
}

Answer 1

您可以在工单发生变化时强制更新 twitter 组件，方法是使用您在仪表板组件中呈现它的代码来键入它：

<TwitterCard
  key={this.props.ticker}
  href={this.props.twitter}
  ticker={this.props.ticker}
/>