在React.js中传递道具

Question

I have a React.js app that pulls the top 30 stories from the HackerNews API, and displays the first 30 on the page. As of right now, my render function for StoryTop displays the correct link to retrieve an individual story from their API, which is also displayed on screen. Where I am having trouble is passing this link to the Story class, where I am getting the error "src is not defined".

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

EDIT FIXED: Passed the var src to the 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>

Used "link" to get story data:

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

Answer 1

It looks like componentDidMount is calling for src but src isn't defined. within the local block scope.

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