![中将组件设置为按钮]( "中将组件设置为按钮")
本文介绍了如何在 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">°</span></p><img className="night_img" src={this.props.data.imagenightA}/><p className="tempnightA">{this.props.data.tempnightA}<span className="degree">°</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">°</span></p><img className="tomnight_img" src={this.props.data.imagenightB}/><p className="tempnightB">{this.props.data.tempnightB}<span className="degree">°</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">°</span></p>
<img className="night_img" src={this.props.data.imagenightA}/>
<p className="tempnightA">{this.props.data.tempnightA}<span className="degree">°</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">°</span></p>
<img className="tomnight_img" src={this.props.data.imagenightB}/>
<p className="tempnightB">{this.props.data.tempnightB}<span className="degree">°</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 ,englishand 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 中将组件设置为按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！