為什么Twitter小部件不重新渲染reactjs

Question

我在應用程序上使用了twitter嵌入式時間軸來顯示公司twitter帳戶的twitter feed。

當我從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方法：

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}
/>