为什么不把道具传给孩子？答案

【问题标题】：Why is not passing the props to the child?为什么不把道具传给孩子？
【发布时间】：2019-07-13 09:11:04
【问题描述】：

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

问题是子组件只显示第一个值“title”而不是第二个。 React 控制台也显示我的子组件的构造函数是一个无用的构造函数，我不明白。我应该用 props 调用构造函数来在组件中使用它们吗？

谢谢。

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;

【问题讨论】：

标签： javascript reactjs children react-props

【解决方案1】：

当您没有state 但构造函数为空时，它是useless，最好将其删除。

关于不显示的值，completed 是boolean 的值，你可以这样做。

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

【讨论】：

无论如何，我应该总是调用构造函数我想使用我从其父级传递的道具，不是吗？ @ravibagul91
没有。如果您有state 或function to bind，那么您只需要一个构造函数，否则最好将其删除。在这种情况下，使用函数式组件会更好。
查看使用功能组件的简化代码 - codesandbox.io/s/react-codesandbox-xn9y0?fontsize=14
明白。谢谢你！ @ravibagul91

【解决方案2】：

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

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

关于你的构造函数的警告是你没有在其中做任何事情，因此它没有用 - 你可以删除它。

【讨论】：

@Michalistico 是的，我提到它不起作用，因为它是布尔值，请检查更新的答案。