在 React 中将状态传递给多个子组件

Question

我无法理解如何将状态作为道具传递给 React 中的其他子组件。在我的代码中，您可以看到我有一个组件，它接受输入并将其映射到我的状态数组，在另一个组件中显示部分数据，这工作得很好。

但总体目标是，当用户单击他们添加到列表中的项目时，React Router 会启动并将视图更改为 MovieDetails 组件，该组件将包含他们输入的额外信息，例如标题，日期和描述。

我什至还没有设置反应路由器，因为我似乎无法正确访问 MovieDetails 组件中的状态。然后我不太确定如何使用路由器显示正确的 MovieDetails 组件。

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import './App.css';

class App extends Component {
  constructor() {
    super();
    this.addMovie = this.addMovie.bind(this);
    this.state = {
      movies : []
    };
  }

  addMovie(movie) {
    let movies = this.state.movies;
    movies.push(movie);
    this.setState({ movies });
  }

  render() {
    return (
      <div className="wrapper">
        <div className="container">
          <div>
            <h3 className="heading">Favorite Movies</h3>
          </div>
        </div>
        <div>
          <AddMovie addMovie={ this.addMovie }/>
          <MovieList movies={ this.state.movies }/>
        </div>
      </div>
    )
  }
}

class AddMovie extends Component {
  addMovie(event) {
    event.preventDefault();
    const movie = {
      title : this.title.value,
      year  : this.year.value,
      image : this.image.value,
      desc  : this.desc.value
    }
    this.props.addMovie(movie);
    this.movieForm.reset();
  }
  render() {
    return (
      <div className="container">
        <form ref={(input) => this.movieForm = input} onSubmit={(e) => this.addMovie(e)}>
          <input ref={(input) => this.title = input} className="Input" type="text" placeholder="Title"/>
          <input ref={(input) => this.year = input} className="Input" type="text" placeholder="Year"/>
          <textarea ref={(input) => this.desc = input} className="Input" type="text" placeholder="Description"></textarea>
          <input ref={(input) => this.image = input} className="Input" type="text" placeholder="Poster URL"/>
          <button type="submit">Add</button>
        </form>
      </div>
    )
  }
}

class MovieList extends Component {
  render() {
    return (
      <div>
        { this.props.movies.map( (movie, i) => <MovieListItem key={i} details={ movie }/> )}
      </div>
    );
  }
}

class MovieListItem extends Component {
  constructor(props) {
    super(props);
    this.toggleClass = this.toggleClass.bind(this);
    this.state = {
      active: false
    };
  }
  toggleClass() {
    const currentState = this.state.active;
    this.setState({ active: !currentState });
  }
  render() {
    const { details } = this.props;
    return (
      <div
        className={this.state.active ? "red": null}
        onClick={this.toggleClass}
      >
        <img src={details.image} alt=""/>
        <hr/>
      </div>
    )
  }
}

class MovieDetails extends Component {
  render() {
    return (
      <div>
        <p>title here</p>
        <p>year here</p>
        <p>description here</p>
        <img src="image" alt=""/>
      </div>
    )
  }
}

export default App;

Answer 1

问题来自您尝试访问输入值的方式。当你使用ref 时，你会得到一个 React 包装器，而不是真正的 DOM 元素，所以你不能直接访问.value 或.reset()。您必须使用getDOMNode() 方法来获取DOM 元素。这对我有用：

const movie = {
  title : this.title.getDOMNode().value,
  year  : this.year.getDOMNode().value,
  image : this.image.getDOMNode().value,
  desc  : this.desc.getDOMNode().value
};

...

this.movieForm.getDOMNode().reset();

另一件事，当你setState 使用当前状态的东西时，你应该使用回调来代替：

addMovie(newMovie) {
  this.setState(({movies: prevMovies})=> ({
    movies: [...prevMovies, newMovie]
  }));
}

从official doc查看完整的setState API

Answer 2

如果我猜对了，当您单击从 MovieList 创建的项目时，您是否要推送到一个新组件（details 应该可以访问）？如果是这样，您必须执行以下步骤：

1. 如果你想推送一个新视图，你必须使用'react-router'中的browserHistory 或hashHistory。在这种情况下，我将使用browserHistory。
2. 要访问MovieDetails 组件中的状态，只需将其传递给browserHistory。

当单击 MovieList 组件中的项目时，我使用您的代码推送到新视图的方式如下：

import {Router, Route, browserHistory} from "react-router";

class Routes extends Component {
  render() {
    let props = this.props;

    return (
      <Router history={browserHistory}>
        <Route path="/" component={App}/>
        <Route path="/movie-details" component={MovieDetails}/>
      </Router>
    )
  }
}

// Here is your App component
class App extends Component {
  // ... your code
}

// ... your other classes


class MovieListItem extends Component {
  // ... Constructor 
  // Here I'm pushing the new route for MovieDetails view
  toggleClass(details) {
    browserHistory.push({
      pathname: '/movie-details',
      state: details // pass the state to MovieDetails
    });
    // ... your code
  }

  render() {
    const {details} = this.props;

    return (
      <div
       // ... your code
       onClick={this.toggleClass.bind(this, details)} // pass details to toggleClass() 
      >
      // ... your code
      </div>
    )
  }
}    

// Here is your Movie Details component
class MovieDetails extends Component { 
  console.log('This props: ', this.props.location.state); // The details object should be logged here
  // ... your code
}

// Export Routes instead of App
export default Routes;

希望对您有所帮助！