Reagovat tabla vizualizační komponenta nemá překreslil když cesta prop změny

Question 1

Mám webovou stránku, která se zobrazí reagovat součást, TableauReports, který ukazuje výjev palubní desce. To je TableaReports součásti:

const TableauReports = ({ selectedBtn }) => {

    console.log(`selectedBtn = ${selectedBtn}`)

    return (
      <div className='tableauPlaceholder' style={{ width: '1400px', height: '950px' }}>
        <object className='tableauViz' width='1400' height='950' style={{ display: 'none' }}>
          <param name='host_url' value='https%3A%2F%2Ftableauanalytical-east.cloud.privateSite.com%2F' />
          <param name='embed_code_version' value='3' />
          <param name='site_root' value='&#47;t&#47;A_B_C' />
          <param name='name' value={`Reports/${selectedBtn.replace(" ", "")}`} />
          <param name='tabs' value='yes' />
          <param name='toolbar' value='yes' />
          <param name='showAppBanner' value='false' />
        </object>
      </div>
    )
  }

export default TableauReports

A v mé app.jsx komponenta je přístupná jako tak:

const [selectedTableauBtn, setSelectedTableauBtn] = useState(constants.TableauButtons[2]);

// some code that sets the selectedTableauBtn... 

<TableauReports selectedBtn={selectedTableauBtn}></TableauReports>

Součásti je skutečně přístupné pokaždé, když selectedTableauBtn změny jako konzole.přihlásit TableauReports je spuštěna a tiskne správnou hodnotu. Problém je: tablo palubní deska nemá přepínání karet, jak by mělo. Ve skutečnosti, přístrojová deska není překreslil na všechny! Proč není na palubní desce rychleji stahuje i zobrazuje a zobrazení aktualizované vizualizace, jak je uvedeno na vstupu selectedBtn?

Question 2

Hledáte nějaké Tablo docs, pokud jde vložený kód se zdá, že použití / jako oddělovač.

Příklad:

<object class='tableauViz' width='800' height='600' style='display:none;'>
   <param name='host_url' value='https%3A%2F%2Fonline.tableau.com%2F' /> 
   <param name='site_root' value='&#47;t&#47;Sales' /> 
   <param name='name' value='MyCoSales&#47;SalesScoreCard&#47;' /> 
   <param name='tabs' value='yes' /> 
   <param name='toolbar' value='yes' />
</object>

Vzhledem k tomu, že nemůžu najít žádnou dokumentaci týkající Tablo je vkládání kódování syntaxe navrhuji odpovídající syntaxi.

<param name='name' value={`Reports&#47;${selectedBtn.replace(" ", "")}&#47;`} />

Pokud se to nezdaří, aby ten iframe osvěžit se pak můžete jen potřebovat větší kladivo sílu nasednout prvek pomocí Reagovat klíč.

const TableauReports = ({ selectedBtn }) => {
  console.log({ selectedBtn });

  return (
    <div
      className='tableauPlaceholder'
      style={{ width: '1400px', height: '950px' }}
    >
      <object
        key={selectedBtn} // <-- key to remount `object`
        className='tableauViz'
        width='1400'
        height='950'
        style={{ display: 'none' }}
      >
        <param
          name='host_url'
          value='https%3A%2F%2Ftableauanalytical-east.cloud.privateSite.com%2F'
        />
        <param name='embed_code_version' value='3' />
        <param name='site_root' value='&#47;t&#47;A_B_C' />
        <param
          name='name'
          value={`Reports&#47;${selectedBtn.replace(" ", "")}&#47;`}
        />
        <param name='tabs' value='yes' />
        <param name='toolbar' value='yes' />
        <param name='showAppBanner' value='false' />
      </object>
    </div>
  )
}

Question 3

To se zdá být externí lib, který používá vanilky js, to asi není odhalování dom změny reagovat je provedením, tak není aktualizace, viz. V případech jako je tento, osobně jsem jen dát vlastní klíč na součásti. To způsobí plné překreslil, takže to nemusí být životaschopné pro vás, ale to by mělo fungovat.

Něco jako

<TableauReports selectedBtn={selectedTableauBtn} key={selectedTableauBtn} />

nebo

<object key={selectedBtn}>...</object>

Drew Reese · Answer 1 · 2021-12-04T00:16:11

Hledáte nějaké Tablo docs, pokud jde vložený kód se zdá, že použití / jako oddělovač.

Příklad:

<object class='tableauViz' width='800' height='600' style='display:none;'>
   <param name='host_url' value='https%3A%2F%2Fonline.tableau.com%2F' /> 
   <param name='site_root' value='&#47;t&#47;Sales' /> 
   <param name='name' value='MyCoSales&#47;SalesScoreCard&#47;' /> 
   <param name='tabs' value='yes' /> 
   <param name='toolbar' value='yes' />
</object>

Vzhledem k tomu, že nemůžu najít žádnou dokumentaci týkající Tablo je vkládání kódování syntaxe navrhuji odpovídající syntaxi.

<param name='name' value={`Reports&#47;${selectedBtn.replace(" ", "")}&#47;`} />

Pokud se to nezdaří, aby ten iframe osvěžit se pak můžete jen potřebovat větší kladivo sílu nasednout prvek pomocí Reagovat klíč.

const TableauReports = ({ selectedBtn }) => {
  console.log({ selectedBtn });

  return (
    <div
      className='tableauPlaceholder'
      style={{ width: '1400px', height: '950px' }}
    >
      <object
        key={selectedBtn} // <-- key to remount `object`
        className='tableauViz'
        width='1400'
        height='950'
        style={{ display: 'none' }}
      >
        <param
          name='host_url'
          value='https%3A%2F%2Ftableauanalytical-east.cloud.privateSite.com%2F'
        />
        <param name='embed_code_version' value='3' />
        <param name='site_root' value='&#47;t&#47;A_B_C' />
        <param
          name='name'
          value={`Reports&#47;${selectedBtn.replace(" ", "")}&#47;`}
        />
        <param name='tabs' value='yes' />
        <param name='toolbar' value='yes' />
        <param name='showAppBanner' value='false' />
      </object>
    </div>
  )
}

Arthur Bruel · Answer 2 · 2021-12-04T00:01:53

To se zdá být externí lib, který používá vanilky js, to asi není odhalování dom změny reagovat je provedením, tak není aktualizace, viz. V případech jako je tento, osobně jsem jen dát vlastní klíč na součásti. To způsobí plné překreslil, takže to nemusí být životaschopné pro vás, ale to by mělo fungovat.

Něco jako

<TableauReports selectedBtn={selectedTableauBtn} key={selectedTableauBtn} />

nebo

<object key={selectedBtn}>...</object>

Reagovat tabla vizualizační komponenta nemá překreslil když cesta prop změny

Otázka

Nejlepší odpověď

V jiných jazycích

Tato stránka je v jiných jazycích

Populární v této kategorii

Oblíbené položky v této kategorii