我正在尝试将两个值作为道具从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;
答案 0 :(得分:2)
当您没有state
却是空的构造函数时,最好使用useless
删除它。
关于未显示的值,completed
是boolean
的值,您可以执行此操作。
<p> {this.props.completed.toString()} </p> // NOT DISPLAYING
答案 1 :(得分:1)
<p> {this.props.completed} </p> // NOT DISPLAYING
它没有显示,因为您传递给它的值是布尔值。显然react不会呈现布尔值。即使您希望显示“ false”,也可以使用toString()
将其转换为字符串。
关于构造函数的警告是您没有在其中执行任何操作,因此它无用-您可以将其删除。