Question

我在父组件中有一个数组，我想将此状态值传递给另一个componenet，该组件将为另一个组件提供支持。

    import React, { Component } from "react";
        import Bookings from "./components/Bookings";
        import Meals from "./components/Meals";
        import Error from "./components/Error";

        class App extends Component {
        state = {
            values: [{ name: "John Doe", date: "2017-09-15" }]
        };

        handleGuestInfo = () => {
            console.log("Here");
            //console.log(this.state.name, "here");
        };
        render() {
            return (
            <div className="container-fluid">
                <center>
                <h2>Hacker Hostel</h2>
                </center>
                <div className="container">
                <Bookings onGuestChange={this.handleGuestInfo} />
                <Error />
                <Meals name={this.state.values} date={this.state.values} />
                </div>
            </div>
            );
        }
        }

        export default App;


                import React, { Component } from "react";

    class Meals extends Component {
    render() {
        return (
        <div className="col-xs-12  col-sm-12 col-md-12 col-lg-12">
            <ol id="list">
            <div>
                <li className="morning">
                Breakfast for {this.props.name} on {this.props.date}
                </li>
                <li className="afternoon">Lunch for insert_hacker_name</li>
                <li className="night">Dinner for insert_hacker_name</li>
            </div>
            </ol>
        </div>
        );
    }
    }
    export default Meals;

任何帮助将不胜感激，我想从app.js中获取餐饭.js文件的名称和日期，我能够传递函数的值。

Answer 1

您可以在values状态上进行映射，并根据该状态渲染Meal组件。

class App extends React.Component {
  state = {
    values: [{ name: "John Doe", date: "2017-09-15" }]
  };

  handleGuestInfo = () => {
    console.log("Here");
    //console.log(this.state.name, "here");
  };
  render() {
    return (
      <div className="container-fluid">
        <center>
          <h2>Hacker Hostel</h2>
        </center>
        <div className="container">
        {this.state.values.map(value =>(
          <Meals key={value.name} name={value.name} date={value.date} />
        ))}
        </div>
      </div>
    );
  }
}

class Meals extends React.Component {
  render() {
    return (
      <div className="col-xs-12  col-sm-12 col-md-12 col-lg-12">
        <ol id="list">
          <div>
            {this.props.valuy}
            <li className="morning">
              Breakfast for {this.props.name} on {this.props.date}
            </li>
            <li className="afternoon">Lunch for insert_hacker_name</li>
            <li className="night">Dinner for insert_hacker_name</li>
          </div>
        </ol>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />

将状态值从一个组件传递到另一组件

1 个答案: