小编Ala*_*uza的帖子

我是ReactJS和React-Router的新手.我有一个组件通过props接收<Link/>来自react-router的对象.每当用户点击该组件内的"下一个"按钮时,我想<Link/>手动调用对象.

现在,我正在使用refs访问支持实例并手动点击<Link/>生成的'a'标记.

问题:有没有办法手动调用链接(例如this.props.next.go)？

这是我目前的代码:

//in MasterPage.js
var sampleLink = <Link to="/sample">Go To Sample</Link>
<Document next={sampleLink} />

//in Document.js
...
var Document = React.createClass({
   _onClickNext: function() {
      var next = this.refs.next.getDOMNode();
      next.querySelectorAll('a').item(0).click(); //this sounds like hack to me
   },
   render: function() {
      return (
         ...
         <div ref="next">{this.props.next} <img src="rightArrow.png" onClick={this._onClickNext}/></div>
         ...
      );
   }
});
...

这是我想要的代码:

//in MasterPage.js
var sampleLink = <Link to="/sample">Go To Sample</Link>
<Document …

我在我的React应用程序的控制台中收到了这个奇怪的警告消息.

警告:propType失败:checker不是函数检查render方法Chart.

我根本没有任何检查方法.如果我删除了我propTypes,警告就消失了.有任何想法吗？

我的反应成分:

var Chart = React.createClass({
  //...
  propTypes: {
    legend: React.PropTypes.bool,
    max: React.PropTypes.number,
    min: React.PropTypes.number,
    series: React.PropTypes.arrayOf(
      React.PropTypes.shape({
        label: React.PropTypes.string,
        values: React.PropTypes.arrayOf(
          React.PropTypes.arrayOf(
            React.PropTypes.oneOfType(
              React.PropTypes.number,
              React.PropTypes.object // Date
            )
          )
        ),
        colorIndex: React.PropTypes.string
      })
    ).isRequired,
    threshold: React.PropTypes.number,
    type: React.PropTypes.oneOf(['line', 'bar', 'area']),
    units: React.PropTypes.string,
    xAxis: React.PropTypes.arrayOf(React.PropTypes.string)
  },
  render: function() {
    return (<svg>...</svg>);
  }
  //...
});

我发送给Chart组件的有效负载是这样的:

var series = [
  {label: 'first', values: [[5,2], [4,3], [3,3], [2,2], [1,1]], colorIndex: "graph-1"},
  {label: 'second', values: [[5,3], [4,2], …

我只是想知道是否可以从Play更改默认包.例如:我想将"controllers"包更改为"com.test.controllers".我不知道这是否有意义,但我只是想知道如果可能的话.我在Play网站上找不到与此相关的任何内容.

是否存在将路由实例减少到路径数组的现有库？

示例:

    <Route path="/" component={App}>
      <Route path="author" component={Author}>
        <Route path="about" component={About}/>
      </Route>
      <Route path="users" component={Users} />
    </Route>

产量

['/', '/author', '/author/about', '/users']

我可以编写一个reduce函数,它只有很少的代码行并解决了这个问题,但我想知道是否有一个现有的库可以为我做这件事,并负责使用反应路由器表示路由的不同方法.

我正在尝试测试一个反应组件的孩子，我想获得其孩子的文本表示。

有没有类似node.textContentReact的工具？

我想要这样的东西：

let testComponent = (
  <Test>
    <p>abc</p>
    <p>abc2</p>
  </Test>
);

expect(testComponent.props.children.toString()).to.equal('abc abc2');

我正在尝试将我当前的AngularJS项目与Karma Coverage集成.请在下面找到package.json和我的karma-config.

的package.json

{
  "name": "Project",
  "description": "Description",
  "repository": "https://www.repo.com",
  "devDependencies": {
    "karma": "~0.10.9",
    "karma-junit-reporter": "~0.2.1",
    "karma-jasmine": "~0.1.5",
    "karma-ng-scenario": "~0.1",
    "karma-script-launcher": "~0.1.0",
    "karma-chrome-launcher": "~0.1.3",
    "karma-firefox-launcher": "~0.1.3",
    "karma-phantomjs-launcher": "~0.1.4",
    "karma-ng-html2js-preprocessor": "~0.1",
    "karma-coverage": "~0.1"
  }
}

Karma配置

'use strict';

module.exports = function (config) {
  config.set({
    basePath: '../../public/',
    logLevel: config.LOG_DEBUG,
    frameworks: ['jasmine'],
    singleRun: true,
    files: [
        'libs/jquery/jquery-1.9.0.js',
        'libs/angular/1.2.10/angular.js',
        'libs/angular/**/*.js',
        'libs/angular/*.js',
        'libs/vendor/*.js',
        'libs/test/**/*.js',

        // fixtures
        {pattern: 'test/mock-data/helloworld/*.json', watched: true, served: true, included: false},

        'apps/helloworld/**/*.js',
        'apps/helloworld/*.js',
        'test/helloworld/unit/**/*.js',
        'test/helloworld/*.js',
        'views/helloworld/directives/*.html'
    ],

    exclude: …

我正在尝试使用ReactJS和JSDOM模拟滚动事件.

最初我尝试了以下内容:

var footer = TestUtils.findRenderedDOMComponentWithClass(Component, 'footer');
footer.scrollTop = 500;
TestUtils.Simulate.scroll(footer.getDOMNode());
//I tried this as well, but no luck
//TestUtils.Simulate.scroll(footer);

滚动事件根本不会传播.然后,我手动创建了事件,一切正常:

var evt = document.createEvent("HTMLEvents");
evt.initEvent("scroll", false, true);
element.dispatchEvent(evt);

问题:我是否在使用TestUtils做错了什么？我怎样才能让它发挥作用？

艾伦

我试图让我的React应用程序正确地渲染ascii艺术。

执行jsx-transformer后，我的作品失去了格式，并在浏览器中呈现出非常奇怪的效果

我的代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Hello World!</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
</head>
<body>
  <div id="content"></div>
  <script type="text/jsx">

    var App = React.createClass({
      render: function() {
        return (
          <pre>
            <code>
              +--------+   +-------+    +-------+
              |        |   + ditaa +    |       |
              |  Text  |   +-------+    |diagram|
              |Document|   |!magic!|    |       |
              |        |   |       |    |       |
              +---+----+   +-------+    +-------+
            </code>
          </pre>
        );
      }
    });

    var element = document.getElementById('content');
    React.render(React.createElement(App), element);
  </script>
</body>
</html>

输出：

如果我删除react并将pre代码块直接添加到html，一切正常。

我在这里做错什么吗？任何帮助表示赞赏...

更新1：我无法编辑ascii艺术。

更新2 …

我正在写一个基于React的文档网站.我想展示使用我的框架中给定组件所必需的代码.同时我想展示实际的组件运行,就像一个并排的视图.

目前,我正在将组件添加为参考实现的String,并将组件添加为运行场景的JSX.像这样的东西:

var ButtonDoc = React.createClass({
  render: function () {
    let buttonComponent = (
      <Button label="Add" />
    );

    let buttonCode = `<Button label="Add" />`;

    return (
      <div>
        {buttonComponent}
        <pre><code>{buttonCode}</code></pre>
      </div>
    );
  }
});

问题:有没有办法可以获得给定React组件的字符串表示而无需复制代码？

我期待这样的事情:

var ButtonDoc = React.createClass({
  render: function () {
    let buttonComponent = (
      <Button label="Add" />
    );

    let buttonCode = `${buttonComponent}`;

    return (
      <div>
        {buttonComponent}
        <pre><code>{buttonCode}</code></pre>
      </div>
    );
  }
});

给定代码的输出是object [object].

我有一个基于ReactJS的博客实现,我想与AddThis集成.我有我的社交图标,我想使用它们.所以我正在寻找一种只集成AddThis后端服务的方法.

我试着环顾四周,但我无法找到如何将AddThis集成到ReactJS组件.

我在某个地方看到了它,并且它使用了一个特殊的命名空间,据我所知,这个命名空间并不友好.

<div addthis:url='blog_url' addthis:title='blog_title' class="addthis_toolbox">
<a class="addthis_button_facebook">
 <svg ... />
</a>

<a class="addthis_button_twitter">
  <svg ... />
</a>

<a class="addthis_button_linkedin">
  <svg ... />
</a>

<a class="addthis_button_reddit">
  <svg ... />
</a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4fc9383e1ee05f1b"></script>

另外,我看到这个JSFiddle有一些信息,但它没有使用ReactJS,也没有使用自定义图标.

问题:AddThis + React有没有好的文档？