亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

如何按函數生成 HTML 并稍后在 JS React 中呈現

如何按函數生成 HTML 并稍后在 JS React 中呈現

尚方寶劍之說 2022-06-09 19:38:12
this.periodicTable[]正如您在下面的代碼中看到的那樣，我正在努力根據給出的信息在 HTML 中生成周期表并稍后渲染它。我怎樣才能讓它工作？首先我是手工制作的（全部在用 HTML 編寫的 render() 部分），但后來我發現生成它會更好。一切正常，直到我切換到生成 html 而不是編寫它。我也想在網站的其他部分使用周期表數據，所以這個是必要的導入 React 的東西class PeriodicTable extends React.Component{    constructor(props){        super(props);        this.state = {            show: true,        };        this.periodicTable = [            //    1 row            this.hydrogen = {                blank: false,                name: "hydrogen",                short: "H",                z: 1,                mass: 1.006,            },            this.blank = {                blank: true            },            this.blank = {                blank: true            },            this.blank = {                blank:true            },            this.blank = {                blank: true            },            this.blank = {                blank: true            },            this.blank = {                blank: true            },            this.blank = {                blank: true            },            this.blank = {                blank: true            },            this.blank = {                blank: true            },            this.blank = {                blank: true            },            this.blank = {                blank: true            },            this.blank = {                blank: true            },            this.blank = {                blank: true            },            this.blank = {                blank: true            },            this.blank = {                blank: true            },            this.blank = {                blank: true            },            this.hellium = {                blank: false,                name: "hellium",                short: "He",                z: 2,                mass: 4.0026,            },            //    2 row        ]        this.output = "";    }
查看完整描述

1 回答

?
MYYA

TA貢獻1868條經驗 獲得超4個贊

好的，所以我修復了你的代碼，我會評論我所做的一切。


// periodicTable doesn't need to be part of the PeriodicTable Component, Juan Marco has made a good sugestion to stract it to a JSON

// for now I'll just put it in a variable outside PeriodicTable

const periodicTable = [

  //    1 row

  {

      blank: false,

      name: "hydrogen",

      short: "H",

      z: 1,

      mass: 1.006,

  },

  {

      blank: true

  },

  {

      blank: true

  },

  {

      blank:true

  },

  {

      blank: true

  },

  {

      blank: true

  },

  {

      blank: true

  },

  {

      blank: true

  },

  {

      blank: true

  },

  {

      blank: true

  },

  {

      blank: true

  },

  {

      blank: true

  },

  {

      blank: true

  },

  {

      blank: true

  },

  {

      blank: true

  },

  {

      blank: true

  },

  {

      blank: true

  },

  {

      blank: false,

      name: "hellium",

      short: "He",

      z: 2,

      mass: 4.0026,

  },

  //    2 row

];


// I've created a new Component that will handle the elements rendering, it's just a Function Component

function TableElement(props) {

  const { elementData } = props;

  const { blank, z, short, mass } = elementData;


  if (blank) return <div className="periodicCard blank" />; // take note that in JSX files, HTML classes are className


  return (

    <div className="periodicCard">

        <sup className="periodicZ">{z}</sup>

        <div className='center'>

            <strong className="periodicElement">{short}</strong>

        </div>

        <div className='center'>

            <p className="periodicMass">{mass}</p>  

        </div>

    </div>

  );

}


class PeriodicTable extends React.Component {

    constructor(props) {

        super(props);


        this.state = {

            show: true,

        };

    }


    // React knows how to handle arrays of ReactComponents, but you must put a key in each element of the array

    generatePeriodicTable = () => {

      return periodicTable.map((el, i) => <TableElement elementData={el} key={i} />);

    }


    showLearnItPage = () => {

        this.setState({ show: false });

    }


    render() {

        if(this.state.show) {

            return (

                <div>

                    <h2>Periodic<sup className="sup">table</sup></h2>

                    <main className="biggrid">

                        {this.generatePeriodicTable()}

                    </main>

                    <div className='center'>

                        <button className='periodic-table-page-button' onClick={this.showLearnItPage}>Back</button>

                    </div>

                </div>

            );

        }

        // after an if with a return you don't need to use else

        return <LearnItPage />;

    }

}


export default PeriodicTable;

現在一切都應該按您的預期工作。花一些時間閱讀React 教程。


查看完整回答
反對 回復 2022-06-09
  • 1 回答
  • 0 關注
  • 113 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號