繁体   English   中英

在React.js中传递道具

[英]Passing props in React.js

我有一个React.js应用程序,可从HackerNews API中提取前30个故事,并在页面上显示前30个故事。 截至目前,我的StoryTop渲染功能显示了正确的链接,可从其API中检索单个故事,该链接也显示在屏幕上。 我遇到麻烦的地方是将此链接传递到Story类,在此我得到了错误“未定义src”。

    var StoryTop = React.createClass({
      getInitialState: function() {
        return {
          content: []
        };
      },

      componentDidMount: function() {
        var src ="https://hacker-news.firebaseio.com/v0/topstories.json?print=pretty"
        $.get(src, function(result) {
          var stories = result;
          if (this.isMounted()) {
            this.setState({
              content: stories.slice(0,30)
            });
          }
        }.bind(this));
      },

      render: function() {
        var storyNodes = this.state.content.map(function(item) {
        var src ="https://hacker-news.firebaseio.com/v0/item/" + item + "/.json?print=pretty";
            return (
                <tr key={item}>
                    <td>
                        {src}
                        <Story/>
                    </td>
                </tr>
            );
        });

        return (
            <table>
                <tbody>
                    {storyNodes}
                </tbody>
            </table>
        );
      }
    });

    React.render(
      <StoryTop />,
      newstories
    );

    var Story = React.createClass({

      getInitialState: function() {
        return {
          by: '',
          title: '',
          score: '',
          url: ''
        };
      },

      componentDidMount: function() {
        $.get(src, function(result) {
          var story = result;
          if (this.isMounted()) {
            this.setState({
              by: story.by,
              score: story.score,
              url: story.url,
              title: story.title,
            });
          }
        }.bind(this));
      },



      render: function() {
        var divclass = 'indivstory';
        var topPClass = 'storytop';
        var bottomPClass= 'storybottom';
        return (
          <div className={divclass}>
            <p className={topPClass}> <span></span><img src="./images/uparrow.gif"></img> <span><a href={this.state.url}>{this.state.title} ({this.state.url.replace(/^https?:\/./,'').replace(/\/.*$/,'')}</a>).</span> </p>
            <p className={bottomPClass}> {this.state.score} points by {this.state.by} | discuss </p>
          </div>
        );
      }
    });

编辑已修正:将var src传递给Story:

var src ="https://hacker-news.firebaseio.com/v0/item/" + item + "/.json?print=pretty";
            return (
                <tr key={item}>
                    <td>
                        {src}
        --->            <Story link = {src} />
                    </td>
                </tr>

使用“链接”获取故事数据:

      componentDidMount: function() {
        $.get(this.props.link, function(result) {
          var story = result;

看起来componentDidMount正在调用src,但未定义src。 在本地块范围内。

componentDidMount: function() {
    $.get(this.render.src, function(result) {
      var story = result; ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM