Question

我目前正在开发ReactJS Web应用程序。

不使用JQuery。

当ReactJS触发onTouchEnd事件时，ReactJS会将XMLHttpRequest发送到我的php服务器。 PHP将遍历MYSQL数据库。之后，如果成功遍历数据库，PHP会将HTML数据发送到javascript AND！我将在同位组件中提供这些HTML数据。

export default class ItemList extends React.Component{
state={
    isScrolled:''
}
handleClick = (e)=>{
    e.stopPropagation();
    console.log(e.currentTarget.id);
    console.log('click '+e.target.id);
}
handleTouchStart = (e)=>{
    console.log('touch start '+e.currentTarget.id);
}
handleTouchMove = (e)=>{
    console.log('touch move'+e.target.id);
    this.setState({
        isScrolled:'scrolled'
    })
}
handleTouchEnd = (e)=>{
    const continent = e.currentTarget.getAttribute('data-continent');
    if(this.state.isScrolled=='scrolled'){
        console.log('nothing happens');
    }else{
        console.log('event worked');
        ajaxRequest(e.currentTarget.className,continent);
    }
    this.setState({
        isScrolled:''
    })
}
render(){
    return(
        <section id="Main">
            <Continents 
                onClick={this.handleClick} 
                onTouchStart={this.handleTouchStart}
                onTouchMove={this.handleTouchMove}
                onTouchEnd={this.handleTouchEnd}
            />
            <Countries/>
        </section>
    )
 }
}

class Continents extends React.Component{
render(){
    return(
        <div className="items">
            <div id="Continent1" {...this.props} data-continent="Europe" className="continents">
                <figure>    
                    <img src="img/london.jpg"/>
                    <figcaption>EUROPE</figcaption>
                </figure>
            </div>
            <div id="Continent2" {...this.props} data-continent="Asia" className="continents" >
                <figure>
                    <img src="img/korea.jpg"/>
                    <figcaption>ASIA</figcaption>
                </figure>
            </div>
            <div id="Continent3" {...this.props} data-continent="North America" className="continents">
                <figure>
                    <img src="img/grandcanyon.jpg"/>
                    <figcaption>NORTH AMERICA</figcaption>
                </figure>
            </div>
            <div id="Continent4" {...this.props} data-continent="South America" className="continents">
                <figure>
                    <img src="img/brazilRio.jpg"/>
                    <figcaption>SOUTH AMERICA</figcaption>
                </figure>
            </div>
            <div id="Continent5" {...this.props} data-continent="Africa" className="continents">
                <figure>
                    <img src="img/africaWild.jpg"/>
                    <figcaption>AFRICA</figcaption>
                </figure>
            </div>
            <div id="Continent6" {...this.props} data-continent="Oceania" className="continents">
                <figure>
                    <img src="img/aukland.jpg"/>
                    <figcaption>OCEANIA</figcaption>
                </figure>
            </div>
        </div>
    )
  }
}

class Countries extends React.Component{
render(){
    return('')
}
}

这是ajaxRequest函数

export default function ajaxRequest(e,value){
let xhr;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
if(typeof(e.target)!='undefined'){
    switch(e.target.className){
        case 'search':
        xhr.open('get','//localhost:80/ReactStudy/travelReduxApp/public/server/search.php?search=' + value,true);
    }
}else{
    switch(e){
        case 'continents':
            xhr.open('get','//localhost:80/ReactStudy/travelReduxApp/public/server/itemList.php?continent='+value ,true);
    }
}
xhr.onreadystatechange = function(data){
    switch(xhr.status){
        case 200:
            const text = xhr.responseText;
            console.log(text);
    }
}
if(xhr.readyState===XMLHttpRequest.DONE){
    xhr.abort();
}
xhr.send();
}

在xhr.onreadystatechange中console.log中获得的内容

<div>England</div><div>Italy</div><div>Germany</div><div>Sweden</div><div>Russia</div><div>Czech Republic</div><div>Poland</div><div>Greece</div><div>Netherlands</div><div>Spain</div><div>Portugal</div><div>France</div>

如果要在“国家/地区”组件中呈现所有这些div，该怎么办？我应该使用redux吗？什么是最好的方法？

对不起，我英语不好。不是说英语的人。

Answer 1

最好的办法是让后端为您提供数据而不是标记。

但是，您仍然可以通过名为dangerouslySetInnerHTML的react属性来添加它。 Keep in mind this comes with some security issues from XSS。

PD：如果您只是在学习反应，请不要使用REDUX。它将使您不知所措，通常是可以避免的（特别是对于较小的应用程序）。

Answer 2

您可以做的是使用异步方法处理ajax请求，然后等待结果。然后，您将在本地获取它，以便可以在需要的地方显示或传递它……类似这样：

state = {countries:''}
getRequestData = async () => {
  let result = await ajaxRequest(e.currentTarget.className,continent);
  this.setState({countries:result})
}

handleTouchEnd = (e)=>{
    const continent = e.currentTarget.getAttribute('data-continent');
    if(this.state.isScrolled=='scrolled'){
        console.log('nothing happens');
    }else{
        console.log('event worked');
        getRequestData()
    }
    this.setState({
        isScrolled:''
    })
}

Answer 3

忘记：

xhr，使用fetch或axios（几行代码来代替此混乱）；
从php返回html ，返回json数组；

提取状态后保存json结果（使用setState）并传递给<Countries/>

<Countries list={this.state.countries} />

和<Countries/>内的渲染使用图

render() {
  return (
    <div>
      {this.props.list.map( (country,idx) => (
         <div key={idx}>{country}</div>
      ) )}
    </div>
  )
}

您可以将其呈现为div，li，button，分配事件处理程序，排序，过滤器 ... ...无需再次调用php即可。

这是一个简单流程（获取json，setState，render），并且有许多关于此的教程，通常在同一组件中渲染数据，将加载的数据传递给子对象的工作几乎相同（以上））。

ReactJS）如何使用XMLHttpRequest从PHP获取数据并在同级组件中呈现该数据

3 个答案: