Question

我刚刚开始学习ReactJS（仅具备HTML / CSS / js的基本知识），我想构建一个站点，从包含图像源，标题，描述和href的JSON文件动态创建图片。。

我百分百肯定有很多，可能缺乏关于它如何运作的各种基本知识，所以我道歉并感谢你的时间和帮助。

在尝试使用react之前，我只使用基本的HTML / CSS / js来实现它，使用js函数循环并将insertAdjacentHtml加入目标div here（警告，非常慢和未优化） - 运行长脚本170x）。现在我正在尝试调整它以做出反应，以了解它如何使用组件。

到目前为止

我的计划 我做了一个app.js，我可以从npm开始，看起来像下面这样。我创建了一个容器，我打算使用它来容纳所有图片。我相信我现在有3个主要问题（和知识差距）。

1）我认为这里的一个大问题是，我很难理解如何创建组件并将其插入app.js.在常规的JS中，很容易想象每次循环都会改变HTML。使用react，我阅读了建议使用map函数来完成JSON数组的教程，并在每个循环中创建一个要渲染的组件。我确信这里可能存在一些问题。

app.js

parseJson(){
    var data = require('./highlights.json');
    for (var i = 0; i < data.length; i++) {
      var obj = data[i];
      console.log("source: " + obj.src);
      {
        return data.map((Highlight, key) =>
          <Highlight source={obj.src} link = {obj.href} title = {obj.title} desc = {obj.desc}/> // probably major problems with this.
          )
      }
    }
  }

render() {
return (
  <div className="App">
    <Menubar/>
    <div>
    <Profilepic onClick={this.toggleModal}/>
    </div>
    <div className = "HighlightsContainer"> // the container
    {this.parseJson()} // the function i intended on running to get the components made, problem 1.
    </div>
    <UploadButton/>
    <UploadWindow show={this.state.uploadWindowOpen}/>

    <Modal show={this.state.isOpen}
      onClose={this.toggleModal}>
      <Signup/>
    </Modal>
    <PhotoViewer show={this.state.photoViewerOn}/>
  </div>
);
}

我制作了突出显示组件，该组件应该采用道具并填充它们以创建组件。

2）我对道具不太熟悉。我完成的教程显示道具是用const componentName = (props) => { return <div>({props.aProp}</div>);};之类的东西制作的，但是我看到的教程似乎能够使用let语句（get？make？save？）道具。 tutorial here。几乎可以肯定的是，我根本不明白道具是如何以类似的方式传递的。

highlight.jsx

import React from 'react';
let Highlight = function statelessFunctionComponentClass(props) {
let source = './images/' + props.source;
let link = props.link;
let title = props.title;
let desc = props.desc;

let style = {
    position: 'relative',
    width: '300px',
    height: '300px',
    background: 'blue',
    display: 'inline-block'
  };

  return (
    <div>
    <a href={link}>
    <img src={source} style={style}/>
    </a>
    <div id="highlight1-title">{title}</div>
    <div id="highlight1-desc">{desc}</div>
    </div>
    );
};

export default Highlight;

最后，这是JSON文件。

highlights.json

[
    {
        "src": "1.jpg",
        "title": "Day 1: Short Title",
        "desc": "some description",
        "href": "#"
    },
    {
        "src": "2.jpg",
        "title": "Day 4: Medium title Words",
        "desc": "some description 2",
        "href": "#"
    }
]

长期关注

3）最后，我想使用react实现网站的the aforementioned version，某些SQL服务器在网站中的某些永久性以及某种方式（不知道））阻止网站每次加载页面时都需要重新运行脚本。更重要的是，上面的实现如上所示，主要依赖于为每个组件创建7种独特样式，以便每张图片都具有独特的背景颜色，onhover效果 - 从而产生臃肿的样式表。 对动态生成的组件进行样式处理的最佳方法是什么，每个组件都需要具有自己的onhover和独特的背景颜色，并且对于5或300个组件表现良好？

感谢您的时间和耐心！

Answer 1

您的parseJson应该是这样的

parseJson(){
   var data = require('./highlights.json');
   return data.map((obj, key) =>
       <Highlight source={obj.src} link={obj.href} title={obj.title} desc={obj.desc}/> 
   )
}

从JSON生成ReactJS动态组件

1 个答案: