小编kno*_*ody的帖子

我正在使用React构建Flask应用程序,我最终遇到了路由问题.

后端负责成为API,因此有些路由如下:

@app.route('/api/v1/do-something/', methods=["GET"])
def do_something():
    return something()

以及通往React的主要途径:

@app.route('/')
def index():
    return render_template('index.html')

我在React应用程序中使用react-router,一切正常,反应 - 路由器带我到/something我得到渲染的视图,但是当我刷新页面/something然后Flask应用程序负责这个调用,我得到Not Found错误.

什么是最好的解决方案？我在想重定向这是不是要求所有的呼叫/api/v1/...到/它的效果并不理想,因为我将回到我的应用程序,而不是渲染的主页阵营视图.

是否可以通过Linkreact-router中的组件传递对象？

就像是:
<Link to='home' params={{myObj: obj}}> Click </Link>

以同样的方式,我会通过props从Parent到Child组件.

如果不可能实现这一目标的最佳方式是什么:
我有一个React + Flux应用程序,我用一些数据渲染表格.我想要做的是当我点击其中一行时,它将带我到这一行的一些细节组件.这行包含了我需要的所有数据,所以我认为如果我能通过它就会很棒Link.

另一个选项是传递idurl中的行,在详细信息组件中读取它,并通过ID从商店请求数据.

不确定实现上述目标的最佳方法是什么......

所以我使用REST框架创建了我的"API",现在尝试对其进行过滤.这就是我models.py或多或少的样子:

class Airline(models.Model):
    name = models.TextField()

class Workspace(models.Model):
    airline = models.ForeignKey(Airline)
    name = models.CharField(max_length=100)

class Passenger(models.Model):
    workspace = models.ForeignKey(Workspace)
    title = models.CharField(max_length=200)

所以我想在我的JSON文件中看到"特定工作区的所有乘客"或"特定航空公司的所有乘客"等.

这是我的, serializers.py

class AirlineSerializer(serializers.ModelSerializer):
    class Meta:
        model = Airline


class WorkspaceSerializer(serializers.ModelSerializer):
    class Meta:
        model = Workspace


class PassengerSerializer(serializers.ModelSerializer):
    class Meta:
        model = Passenger

而且views.py:

class AirlineList(generics.ListCreateAPIView):
    model = Airline
    serializer_class = AirlineSerializer


class AirlineDetail(generics.RetrieveUpdateDestroyAPIView):
    model = Airline
    serializer_class = AirlineSerializer


class WorkspaceList(generics.ListCreateAPIView):
    model = Workspace
    serializer_class = WorkspaceSerializer


class WorkspaceDetail(generics.RetrieveUpdateDestroyAPIView):
    model = Workspace …

我正在使用react native构建一个应用程序,它使得获取调用依赖于来自服务器的最新信息.我注意到它似乎缓存了响应,如果我再次运行该fetch调用,它将返回缓存的响应,而不是来自我的服务器的新信息.

我的功能如下:

goToAll() {
  AsyncStorage.getItem('FBId')
    .then((value) => {
      api.loadCurrentUser(value)
        .then((res) => {
          api.loadContent(res['RegisteredUser']['id'])
            .then((res2) => {
              console.log(res2);
              this.props.navigator.push({
                component: ContentList,
                title: 'All',
                passProps: {
              content: res2,
            user: res['RegisteredUser']['id']
          }
        })
      });
    });
  })
  .catch((error) => {console.log(error);})
  .done();
}

而api.js im调用的函数如下:

loadContent(userid){
  let url = `http://####.com/api/loadContent?User_id=${userid}`;
  return fetch(url).then((response) => response.json());
}

我正在学习React,我偶然发现了这个"充满活力的孩子"的怪癖.

带有代码示例的序言:

// Render Pass 1
<Card>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</Card>

// Render Pass 2
<Card>
  <p>Paragraph 2</p>
</Card>

在第二render()遍中,似乎vdom diffing的工作方式是删除第二个孩子,然后将第一个孩子的文本转换为"第2段".这很快,但如果你需要国家坚持说......第二个孩子,你会发现奇怪的事情发生了!

所以React建议对这些标签使用"key"属性.现在,vdom差异将是惊喜的,你会看到状态得到保留renders().

我的问题:有没有办法让React自己设置"密钥"而不是按照他们建议的方式进行操作？

我正在使用react-router 1.0和他们的历史集成.

import { createHistory, useBasename } from 'history'

const history = useBasename(createHistory)({
    basename: '/base-path'
});

export default (
    <Router history={history}>
        <Route path="/" component={require("Template")}>
            <Route path="sub-page" component={require("SubPage")}/>
        </Route>
    </Router>
);

我正在尝试从API和URL中删除ID,并在JSON对象中传递HATEOAS创建的自我链接.我想通过pushState状态参数传递数据.

onClickEditButton(selfLinkObject) {
    this.history.pushState(selfLinkObject, "/my/url");
}

但是当我试图获得状态时,它没有被传递.

import React from "react"
import { History } from "react-router"

export default React.createClass({
    mixins: [History],
    componentDidMount() {
        console.log(this.state);
        console.log(this.history.state);
        console.log(history.state);
    },
    render() {
        <p>Check the console to see if the state is passed from the pushState(state, url, params);</p>
    }
});

根据 …

我想创建一个可以使用React.js呈现的灵活/动态 JSX表单格式.此格式必须包含嵌套组.一个组可以包含其他组以及问题.

var Group = React.createClass({
    render: function(){
        return (
            <fieldset></fieldset>
        );
    }
});

var Text = React.createClass({
    render: function() {
        return (
            <label>
               <input type="text"/>
           </label>
        );
     }
});

React.render(
    <form>
        <Group>
           <Text/>
        </Group>
        <Text/>
    </form>,
    document.getElementById('container')
);

我想生产:

<form>
    <fieldset>
        <label>
            <input type="text">
        </label>
    </fieldset>
    <label>
        <input type="text">
    </label>
</form>

但是,<fieldset>元素未填充.输出只包含一个空<fieldset>.

我应该如何嵌套react.js组件,并仍然保持在根和嵌套级别重用问题和组组件的灵活性？

我正在构建多语言网站,其中语言首选项是URL的一部分,例如

http://example.com/<somepage>      (Russian, default)
http://example.com/en/<somepage>   (English)
http://example.com/jp/<somepage>   (Japanese)
http://example.com/../             (etc)

当我为所有语言使用前缀时,一切都很好:

<Route path="/:lang">
  <Route path="somepage" component={Somepage}/>
</Route>

但是对于默认语言,我不需要在url中包含语言,如示例所示.在可焊接路由器中,可以通过在路径中使用regexp来解决:

path: '/:lang([a-z]{2})?/<somepage>'

但它在反应路由器中不起作用,因为路径必须是字符串,而不是正则表达式.任何想法如何处理这个用例？

我已经检查了Color的Java类文档,发现我可以(e.g. "#FFFFFF")使用该Color.decode();方法从十六进制代码字符串生成一个Color对象.

我想为我正在处理的项目实现反向过程,但似乎没有为此类内置的方法.

是否有捷径可寻？

我有一个简单的React组件,它接受一个隐藏/显示组件子项的prop.我使用style属性隐藏/显示display: none.如果我使用display: none !important,组件在收到新道具时不再重新渲染.

在render方法中,它看起来像这样:

var style = {};

if(shouldHide) {
    //this works
    style = {
        display: 'none'
    };
    //this does not
    //style = {
    //  display: 'none !important'
    //};
}

return (
    <span style={style} {...this.props} />
);

以下是完整的示例:https://jsfiddle.net/ccnokes/LnrnrLy2/(相关行从第27行开始)

这里发生了什么？我错过了什么吗？