Question

我有ProductList组件

import Title from "./Title";

class ProductList extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return <Title name="Our" title="Products" />;
  }
}

和Title组件，该组件将导出，然后在ProductList组件中使用。

class Title extends Component {
  constructor(title, name) {
    super();
    this.title = title;
    this.name = name;
  }
  render() {
    return (
      <div className="product-title">
        {this.name} <strong>{this.title}</strong>
      </div>
    );
  }
}

但是我无法渲染title和name。

此外，还有一个问题，如果我将基于类的组件编写为基于函数的组件，我们需要这样做function Title({ name, title })，为什么我们需要括号{}来包装name和{{1} } 那里？

Answer 1

props在this.props内部可用于基于类的组件。您在这里不需要constructor

class Title extends Component {
  render() {
    const {name, title } = this.props
    return (
      <div className="product-title">
        {name} <strong>{title}</strong>
      </div>
    );
  }
}

如果我将基于类的组件编写为基于函数的组件，我们需要这样做function Title({ name, title })为什么我们需要在其中包裹名称和标题的方括号？

这是一种称为destructuring assignment的模式，可以将数组中的值或对象中的属性解压缩为不同的变量

您可以传递object作为参数，并且仅在函数体内或直接在声明中对其进行破坏

const user = {name: 'John', surname: 'Doe'}
logUser(user)

const logUser = user =>{
   const { name, surname } = user

   console.log(name, surname)
}

等同于

const logUser = ({ name, surname }) => console.log(name, user)

由于功能组件收到的唯一参数是props，因此可以像这样传递它

<Child foo='bar' />

直接从props对象中解构参数

const Child = ({ foo }) => <span> {foo} </span>

将道具传递给子组件的问题

1 个答案: