Question

这是我的代码截图

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'));

第一个组件

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

和app.js包含此代码

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')
)

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

请注意复制链接的截图

Answer 1

您可以将值作为道具传递给子组件。
在应用组件中添加：

render(){
    return (
       <div>
              <button><Link to="weatherAr">Arabic</Link><button>
             <button><Link to="weatherEng">English</Link></button>    
             {React.cloneElement(this.props.children, { imagedayA: this.state.imagedayA, imagenightA: this.state.imagedayA})}

     </div>

    );

这将允许您将imagedayA的值作为子组件中的道具读取。
现在你可以做（ WeatherAr ）：

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

     <div className="main">
          // Here you can access the value:
          {this.props.imagedayA}
          <img className="bar_en" src="/images/bar_en.png" />  
          // more code ...
     </div> 
   </div>
  }
})

Answer 2

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

Weather.js

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

然后

EngWeather.js

import Weather from './Weather'

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

如何在react.js中将组件设置为按钮

2 个答案: