如何在 react.js 中将组件设置为按钮 [英] how can set component to button in react.js

问题描述

这是我的代码截图

index.html

index.js

从'react'导入React；从 'react-dom' 导入 ReactDOM；从min-jquery"导入$；从axios"导入 axios；从'react-dom'导入{渲染}从 './weatherEng' 导入 WeatherEng从 './weatherAr' 导入 WeatherAr从反应路由器"导入{链接}；const urlP=`http://localhost:3000/`;类 App 扩展了 React.Component {构造函数(道具){超级(道具)；this.state={imagedayA:[],imagenightA:[]};this.componentDidMount();}componentDidMount() {axios.get(urlP).then(功能(响应){console.log(response.data,"这是响应")this.setState({imagedayA:response.data.today.iconday,imagenightA:response.data.today.iconnight})}.bind(this)).catch(函数(响应){控制台日志(响应)；});}使成为(){返回 (<div><button><Link to="weatherAr">阿拉伯语</Link><button><button><Link to="weatherEng">English</Link></button><div>{this.props.children}</div>

);};}render(<App/>,document.querySelector('.container'));

第一个组件

从 'react' 导入 React导出默认 React.createClass({使成为() {返回 
<div className="main"><img className="bar_en" src="/images/bar_en.png"/><img className="today-en" src="/images/today_en.png"/><img className="tomorrow-en" src="/images/tomorrow_en.png"/><img className="today_img" src={this.props.data.imagedayA}/><p className="tempdayA">{this.props.data.tempdayA}<span className="degree">&deg;</span></p><img className="night_img" src={this.props.data.imagenightA}/><p className="tempnightA">{this.props.data.tempnightA}<span className="degree">&deg;</span></p><img className="line" src="/images/divider.png"/><img className="linedown" src="/images/divider.png"/><img className="tomday_img" src={this.props.data.imagedayB}/><p className="tempdayB">{this.props.data.tempdayB}<span className="degree">&deg;</span></p><img className="tomnight_img" src={this.props.data.imagenightB}/><p className="tempnightB">{this.props.data.tempnightB}<span className="degree">&deg;</span></p><a href="http://arabiaweather.com" target="_blank"><img className="aw" src="/images/aw.png"/></a>

}})

第二个组件

和 app.js 包含此代码

从'./index'导入索引从 './weatherEng' 导入 WeatherEng从 './weatherAr' 导入 WeatherAr从反应路由器"导入 {Router, hashHistory, Route}ReactDOM.render(<路由器历史={hashHistory}><Route path="/" component={Index}><Route path="Arabic" component={WeatherAr}/><Route path="english" component={WeatherEng}/></路线></Router>, document.queryString('.container'))

主要想法希望主页只包含阿拉伯语，英语的按钮当点击阿拉伯语 /english 转到 arabic/english 组件与 this.state 包含我从索引中的 url 设置的数据

注意复制截图的链接

解决方案

您可以拥有一个外部 js 文件，用于处理您的图像，并将其导入到您的两个组件中.

Weather.js导出默认类 Weather extends React.Component {...您的实施...}

然后

EngWeather.js从'./Weather'导入天气导出默认类 EngWeather 扩展天气 {...您的实施...}

this is my code screenshot

index.html

index.js

import React  from 'react';
import ReactDOM from 'react-dom';
import $ from "min-jquery";
import axios from "axios";
import { render } from 'react-dom'
import WeatherEng from './weatherEng'
import WeatherAr from './weatherAr'
import {Link} from 'react-router';


const urlP=`http://localhost:3000/`;

class App extends React.Component {
constructor(props){
    super(props);
    this.state={ 
      imagedayA:[],
      imagenightA:[]
      };
      this.componentDidMount();
  }
   componentDidMount() {
     axios.get(urlP)
            .then(function (response) {
              console.log(response.data,"this is response")
              this.setState({
                imagedayA:response.data.today.iconday,
                imagenightA:response.data.today.iconnight
              })  
          }.bind(this))
            .catch(function (response) {
              console.log(response);
          });
      }
  render(){
    return (
       <div>
              <button><Link to="weatherAr">Arabic</Link><button>
             <button><Link to="weatherEng">English</Link></button>    
             <div>{this.props.children}</div> 

     </div>

    );
  };
}


render(<App/>,document.querySelector('.container'));

first component

import React from 'react'
export default React.createClass({
  render() {
    return <div>

     <div className="main">
          <img className="bar_en" src="/images/bar_en.png" />  
          <img className="today-en" src="/images/today_en.png"/>
          <img className="tomorrow-en" src="/images/tomorrow_en.png"/>

          <img className="today_img" src={this.props.data.imagedayA}/>
          <p className="tempdayA">{this.props.data.tempdayA}<span className="degree">&deg;</span></p>
          <img className="night_img" src={this.props.data.imagenightA}/>
          <p className="tempnightA">{this.props.data.tempnightA}<span className="degree">&deg;</span></p>

          <img className="line" src="/images/divider.png"/>
          <img className="linedown" src="/images/divider.png"/>

          <img className="tomday_img" src={this.props.data.imagedayB}/>
          <p className="tempdayB">{this.props.data.tempdayB}<span className="degree">&deg;</span></p>
          <img className="tomnight_img" src={this.props.data.imagenightB}/>
          <p className="tempnightB">{this.props.data.tempnightB}<span className="degree">&deg;</span></p>
          <a href="http://arabiaweather.com" target="_blank"><img className="aw" src="/images/aw.png" /></a>
     </div> 
   </div>
  }
})

second component

and app.js contain this code

import Index from './index'
import WeatherEng from './weatherEng'
import WeatherAr from './weatherAr'

import {Router, hashHistory, Route} from 'react-router'
ReactDOM.render(
  <Router history={hashHistory}>
    <Route path="/" component={Index}>
        <Route path="Arabic" component={WeatherAr}/>
        <Route path="english" component={WeatherEng}/>
    </Route>
  </Router>, document.queryString('.container')
)

the main idea want to main page be just contain buttons of arabic ,english and when click on arabic /english go to arabic/english component with this.state which is contain data that i set to it from url in index

Note just copy link for screenshots

解决方案

You could have an external js file, that handles your images, and import it in both of your components.

Weather.js

export default class Weather extends React.Component {
  ...your implementation...
}

And then

EngWeather.js

import Weather from './Weather'

export default class EngWeather extends Weather {
  ...your implementation...
}

这篇关于如何在 react.js 中将组件设置为按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！