Question

我正在尝试将两个值作为道具从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;

Answer 1

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

关于未显示的值，completed是boolean的值，您可以执行此操作。

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

Answer 2

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

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

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

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

2 个答案: