如何按函数生成 HTML 并稍后在 JS React 中呈现

Question

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 = "";

    }

Answer 1

好的，所以我修复了你的代码，我会评论我所做的一切。// 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 PeriodicTableconst periodicTable = [&nbsp; //&nbsp; &nbsp; 1 row&nbsp; {&nbsp; &nbsp; &nbsp; blank: false,&nbsp; &nbsp; &nbsp; name: "hydrogen",&nbsp; &nbsp; &nbsp; short: "H",&nbsp; &nbsp; &nbsp; z: 1,&nbsp; &nbsp; &nbsp; mass: 1.006,&nbsp; },&nbsp; {&nbsp; &nbsp; &nbsp; blank: true&nbsp; },&nbsp; {&nbsp; &nbsp; &nbsp; blank: true&nbsp; },&nbsp; {&nbsp; &nbsp; &nbsp; blank:true&nbsp; },&nbsp; {&nbsp; &nbsp; &nbsp; blank: true&nbsp; },&nbsp; {&nbsp; &nbsp; &nbsp; blank: true&nbsp; },&nbsp; {&nbsp; &nbsp; &nbsp; blank: true&nbsp; },&nbsp; {&nbsp; &nbsp; &nbsp; blank: true&nbsp; },&nbsp; {&nbsp; &nbsp; &nbsp; blank: true&nbsp; },&nbsp; {&nbsp; &nbsp; &nbsp; blank: true&nbsp; },&nbsp; {&nbsp; &nbsp; &nbsp; blank: true&nbsp; },&nbsp; {&nbsp; &nbsp; &nbsp; blank: true&nbsp; },&nbsp; {&nbsp; &nbsp; &nbsp; blank: true&nbsp; },&nbsp; {&nbsp; &nbsp; &nbsp; blank: true&nbsp; },&nbsp; {&nbsp; &nbsp; &nbsp; blank: true&nbsp; },&nbsp; {&nbsp; &nbsp; &nbsp; blank: true&nbsp; },&nbsp; {&nbsp; &nbsp; &nbsp; blank: true&nbsp; },&nbsp; {&nbsp; &nbsp; &nbsp; blank: false,&nbsp; &nbsp; &nbsp; name: "hellium",&nbsp; &nbsp; &nbsp; short: "He",&nbsp; &nbsp; &nbsp; z: 2,&nbsp; &nbsp; &nbsp; mass: 4.0026,&nbsp; },&nbsp; //&nbsp; &nbsp; 2 row];// I've created a new Component that will handle the elements rendering, it's just a Function Componentfunction TableElement(props) {&nbsp; const { elementData } = props;&nbsp; const { blank, z, short, mass } = elementData;&nbsp; if (blank) return <div className="periodicCard blank" />; // take note that in JSX files, HTML classes are className&nbsp; return (&nbsp; &nbsp; <div className="periodicCard">&nbsp; &nbsp; &nbsp; &nbsp; <sup className="periodicZ">{z}</sup>&nbsp; &nbsp; &nbsp; &nbsp; <div className='center'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <strong className="periodicElement">{short}</strong>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div className='center'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p className="periodicMass">{mass}</p>&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; );}class PeriodicTable extends React.Component {&nbsp; &nbsp; constructor(props) {&nbsp; &nbsp; &nbsp; &nbsp; super(props);&nbsp; &nbsp; &nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; show: true,&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; }&nbsp; &nbsp; // React knows how to handle arrays of ReactComponents, but you must put a key in each element of the array&nbsp; &nbsp; generatePeriodicTable = () => {&nbsp; &nbsp; &nbsp; return periodicTable.map((el, i) => <TableElement elementData={el} key={i} />);&nbsp; &nbsp; }&nbsp; &nbsp; showLearnItPage = () => {&nbsp; &nbsp; &nbsp; &nbsp; this.setState({ show: false });&nbsp; &nbsp; }&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; if(this.state.show) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>Periodic<sup className="sup">table</sup></h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <main className="biggrid">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {this.generatePeriodicTable()}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </main>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className='center'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button className='periodic-table-page-button' onClick={this.showLearnItPage}>Back</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; // after an if with a return you don't need to use else&nbsp; &nbsp; &nbsp; &nbsp; return <LearnItPage />;&nbsp; &nbsp; }}export default PeriodicTable;现在一切都应该按您的预期工作。花一些时间阅读React 教程。