javascript - react 能不能跨文件获取组件的属性?
怪我咯
怪我咯 2017-04-11 10:03:49
[JavaScript讨论组]

定义了一个skill组件,点击它会打开一个新页面

handleOpen(res){
      window.open("details.html");
      console.log(datas);//这里可以拿到点击的数据但是怎么传给新开页面的组件呢?
  },
  render() {
    return (
    <p className="photo">
      <h2 className="lastest-title-photo">最新作品
      </h2>
      <Row className="skill">
           {
          this.state.data.map(function(res){
              return <Col span="24" key={res.ID} ref="myTextInput">
                <p className="slil-card" >
                  <p className="skill-img" onClick={this.handleOpen.bind(this,res)}>
                    <img src={res.URL} />
                  </p>
                  <p className="skill-content">
                    <h2 className="skill-title"><span onClick={this.handleOpen.bind(this,res)}>{res.TITLE}</span></h2>
                    <p className="skill-subtext">{res.SUBTEXT}</p>
                  </p>
                </p>             
                 </Col>
          },this)
        } 
      </Row>
    </p>
    );

我想要在另一个jsx文件中得到我所点击元素的数据该怎么做?

 import ReactDOM from 'react-dom';
import React from 'react';
import { render } from 'react-dom';
import Skill from '../component/Skill';
import '../details/all.less';
const App = React.createClass({
  getInitialState: function() {
    //怎么获取到点击元素的数据?
      
  },
  render() {
      
    return (
      <p>
        <p className="details-head">
            <img src=""/>
        </p>
      </p>
    )
  }
});

ReactDOM.render(<App />, document.getElementById('web-main1'));
怪我咯
怪我咯

走同样的路,发现不同的人生

全部回复(2)
PHP中文网

两个思路,第一个:

  1. 构建父子组件,通过父来当数据中心,子分别从其中取值

  2. 使用或自己定义数据中心,如redux,localstorage等

PHPz

非要用window.open吗?
window.open 会打开一个新页面,我感觉不符合单页的意义

真的要用的话,我感觉只能用windows.open('http://xxx.xxx.xx/some.html?arg1=something&arg2=something);

然后在racet-router中配置,在页面中通的props.params的来获得 arg1,arg2的内容

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号