Question

我创建了一个组件。它需要返回当前日期和时间。

import * as React from 'react';

class Clock extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            date: new Date()
        }
    }
    render() {
        return (this.date);
    }
}

我需要访问Home组件中的数据，并使用home的返回值设置其时间状态。

如果我的家庭组件如下所示，

export class Home extends Component {
    displayName = Home.name

    state = {
        time: null
    };

    handleTime = (timeValue) =>
        this.setState(currentState => ({
            time: timeValue

        }));        

    render() {
        return (
            <div>                 
                <div>
                    <Clock time="handleTime"/>
                </div>
            </div>
        );
    }
}

我在做什么错？

Answer 1

以下代码将在构造Clock组件时设置Home组件上的时间。不确定这是否是您想要的。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td class="company">Company 1</td>
      <td class="position">Position 1</td>
      <td class="address">Address 1</td>
      <td><input type="checkbox"></td>
    </tr>
    <tr>
      <td class="company">Company 2</td>
      <td class="position">Position 2</td>
      <td class="address">Address 2</td>
      <td><input type="checkbox"></td>
    </tr>
    <tr>
      <td class="company">Company 3</td>
      <td class="position">Position 3</td>
      <td class="address">Address 3</td>
      <td><input type="checkbox"></td>
    </tr>
  </tbody>
</table>

<button>
Go to work
</button>

您的Home组件未正确引用handleTime函数（缺少大括号和用于访问类成员的'this'关键字）

version: "2"

services:
    db:
        image: mysql:5.6
        volumes:
            - db_data:/var/lib/mysql
        restart: always
        environment:
            MYSQL_ROOT_PASSWORD: somewordpress
            MYSQL_DATABASE: wordpress
            MYSQL_USER: wordpress
            MYSQL_PASSWORD: wordpress

    wordpress:
        depends_on:
            - db
        image: wordpress:latest
        ports:
            - "8000:80"
        restart: always
        environment:
            WORDPRESS_DB_HOST: db:3306
            WORDPRESS_DB_USER: wordpress
            WORDPRESS_DB_PASSWORD: wordpress
        volumes:
            - ./public_html/wp-content/themes/oceanwp:/var/www/html/wp-content/themes/oceanwp
            - ./public_html/wp-content/plugins:/var/www/html/wp-content/plugins
            - ./public_html/wp-content/mu-plugins:/var/www/html/wp-content/mu-plugins
volumes:
    - ./data:/docker-entrypoint-initdb.d

Answer 2

像这样编辑您的家

import React, { Component } from "react";
import Clock from "./Clock";

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      time: null
    };
  }
  displayName = Home.name;

  handleTime = timeValue => {
    this.setState({
      time: "timeTest"
    });
  };

  render() {
    return (
      <div>
        <div>
          <Clock time={this.state.time} />
        </div>
        <button onClick={this.handleTime.bind(this)}>Change time</button>
      </div>
    );
  }
}

export default Home;

您的时钟如下：

import React from "react";

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date(),
      time: props.time
    };
  }
  render() {
    console.log(this.props.time);
    return (
      <div>
        <div>{this.state.date.toString()}</div>
        <div>{this.props.time}</div>
      </div>
    );
  }
}

export default Clock;

Answer 3

将函数handleTime传递到Clock组件：
```
<Clock time={this.handleTime} />
```

在构造函数的组件time上使用道具Clock

export default class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date()
    }
    props.time(this.state.date); //U pass prop time
  }
  render() {
    return this.state.date.toString(); //return state string not object
  }
}

将日期和时间从一个组件解析到另一个组件

3 个答案: