为什么不将道具传递给孩子?

时间:2019-07-13 09:11:04

标签: javascript reactjs children react-props

我正在尝试将两个值作为道具从React组件“ App”传递给他的孩子“ Todo”。我正在传递值标题并通过json占位符API完成。 JSON对象是正确的,我已经检查过了。

问题在于子组件仅显示第一个值“ title”而不显示第二个值。 此外,React控制台还显示,我来自childs组件的构造函数是无用的构造函数,我不理解。我应该用道具调用构造函数,以便在组件中使用它们,对吗?

谢谢。

App.jsx:

import React from 'react'
import Todo from './Todo'

import '../styles/Todo.css'

class App extends React.Component {
    constructor() {
        super();
        this.state = {
            todos: []
        }
    }

    render() {
        return (
            <div className="todo-list">
                <Todo title="Hello" completed={false}></Todo> // HERE
            </div>
        );
    }
}

export default App;

Todo.jsx

import React from 'react';

import "../styles/Todo.css"

class Todo extends React.Component {
    constructor(props){ // USELESS CONSTRUCTOR?
        super(props);
    }
    render(){
        return(
            <div className="todo-item">
                <input type="checkbox" />
                <p> {this.props.title} </p>
                <p> {this.props.completed} </p> // NOT DISPLAYING
            </div>
        );
    }
}

export default Todo;

2 个答案:

答案 0 :(得分:2)

当您没有state却是空的构造函数时,最好使用useless删除它。

关于未显示的值,completedboolean的值,您可以执行此操作。

<p> {this.props.completed.toString()} </p> // NOT DISPLAYING

答案 1 :(得分:1)

<p> {this.props.completed} </p> // NOT DISPLAYING

它没有显示,因为您传递给它的值是布尔值。显然react不会呈现布尔值。即使您希望显示“ false”,也可以使用toString()将其转换为字符串。

关于构造函数的警告是您没有在其中执行任何操作,因此它无用-您可以将其删除。