如何使用ReactJS嵌入Gist

Gist嵌入脚本用于

document.write

script

虽然您无法将Gist嵌入脚本动态添加到页面中，但是您 可以 通过JSONP 获得Gist 的 内容
并将其自己写入文档中。这是一个具有

gist

file

var EmbeddedGist = React.createClass({  propTypes: {    gist: React.PropTypes.string.isRequired, // e.g. "username/id"    file: React.PropTypes.string // to embed a single specific file from the gist  },  statics: {    // Each time we request a Gist, we'll need to generate a new    // global function name to serve as the JSONP callback.    gistCallbackId: 0,    nextGistCallback: function() {      return "embed_gist_callback_" + EmbeddedGist.gistCallbackId++;    },    // The Gist JSON data includes a stylesheet to add to the page    // to make it look correct. `addStylesheet` ensures we only add    // the stylesheet one time.    stylesheetAdded: false,    addStylesheet: function(href) {      if (!EmbeddedGist.stylesheetAdded) {        EmbeddedGist.stylesheetAdded = true;        var link = document.createElement('link');        link.type = "text/css";        link.rel = "stylesheet";        link.href = href;        document.head.appendChild(link);      }    }  },  getInitialState: function() {    return {      loading: true,      src: ""    };  },  componentDidMount: function() {    // Create a JSONP callback that will set our state    // with the data that comes back from the Gist site    var gistCallback = EmbeddedGist.nextGistCallback();    window[gistCallback] = function(gist) {      if (this.isMounted()) {        this.setState({          loading: false,          src: gist.div        });        EmbeddedGist.addStylesheet(gist.stylesheet);      }    }.bind(this);    var url = "https://gist.github.com/" + this.props.gist + ".json?callback=" + gistCallback;    if (this.props.file) {      url += "&file=" + this.props.file;    }    // Add the JSONP script tag to the document.    var script = document.createElement('script');    script.type = 'text/javascript';    script.src = url;    document.head.appendChild(script);  },  render() {    if (this.state.loading) {      return <div>loading...</div>;    } else {      return <div dangerouslySetInnerHTML={{__html: this.state.src}} />;    }  }});

您可以像这样使用它：

var app = (  <div>    <EmbeddedGist gist="BinaryMuse/a57ae1a551472e06b29a" file="restful.js" />    <hr />    <EmbeddedGist gist="BinaryMuse/bb9f2cbf692e6cfa4841" />  </div>);React.render(app, document.getElementById("container"));

看看这个在JSfiddle上工作的示例：http
:
//jsfiddle.net/BinaryMuse/nrb6zxfw/

改善此问题的一种方法是，确保

EmbeddedGist

gist

file

componentWillReceiveProps