1

処理されたコンポーネントにいくつかの小道具を渡そうとしていますが、react-router はそうしません。

var Objects = React.createClass({
    getInitialState: function() {
        return {
            selected: "All"
        }
    },
    select: function(opt) {
        this.setState({
            selected: opt
        });
    },
    render: function() {

        return (
            <div>
                <LeftNav select={this.select} />
                <this.props.activeRouteHandler selected={this.state.selected} />
            </div>
        );
    }
});



var routes = (
    <Routes>
        <DefaultRoute name="objects" handler={objecctHandler}/>
    </Routes>
);

URLに「#/」が表示されるようになったため、ルーターは正常にロードされます。左のナビゲーションは正常にレンダリングされ、状態も更新されます。ただし、処理されたコンポーネント、つまり objectHandler には props.selected はありません。ここで何か不足していますか？ありがとう。

反応ルーター 0.7.0 を使用しています

4

2 に答える 2

0

今使っているのはこんな感じです。

コンポーネントにルーティングするだけの 1 つの最上位ルートApp:

React.renderComponent(
    <Routes>
        <Route handler={App}>
            <Route path="/todos" handler={TodoList} />
        </Route>
    </Routes>
, mountNode);

コンポーネントはAppこんな感じ。Containerすべてのサブルート (つまり、TodoListルート)にa を渡します。このコンテナーには、todos のリスト (および、新しい Todos を追加/永続化するためのメソッドなど、アプリで必要なもの) が含まれています。これは、状態を最上位に保ち、サブコンポーネントを分離するのに役立ちます。Appコンポーネントはすべてのルートで使用されるため、マウントが解除されることはなく、状態が失われることはありません。

var Container = function(app) {
    return {
        getTodos: function() {
            return app.state.todos;
        }
    };
};

var App = React.createClass({
    getInitialState: function() {
        return {
            todos: ['Buy milk', 'Call Mike']
        };
    },

    componentWillMount: function() {
        this.container = Container(this);
    },

    render: function() {
        return <this.props.activeRouteHandler container={this.container} />;
    }
});

これがそのTodoList外観です。実際には と の 2 つのコンポーネントTodoListですTodoListInner。クリーンでテスト可能なTodoListInnerままです。それ自体はそれほど簡単にテストできるわけではありませんが、内部コンポーネントをラップするだけなので、これは大きな問題にはなりません。TodoList

var TodoListInner = React.createClass({
    render: function() {
        <ul>
            {this.props.todos.map(function(todo) {
                return <li>{todo}</li>;
            })}
        </ul>
    }
})

var TodoList = React.createClass({
    render: function() {
        <TodoListInner todos={this.props.container.getTodos()} />
    }
});

これは、jsmiff のソリューションよりも少し複雑ですが、いくつかの追加の利点があります。

于 2014-10-25T23:03:46.263 に答える