调用组件时如何设置状态？答案

【问题标题】：How can I set state when calling component?调用组件时如何设置状态？
【发布时间】：2020-03-24 14:25:14
【问题描述】：

我对反应很陌生，已经有点卡住了。我已经为在整个网站上重复多次的 Article Topper 制作了一个组件。它有一个徽标、一个标题和一些分享按钮，并且就位于文章的上方，上面有文章的名称。

我想做的是在调用组件时更新标题名称，因为每篇文章都有不同的名称。

  constructor(props) {
    super(props);

    this.state = {
      topper: []
    };
  }

  render() {
    return (
      <div className="articletopper">
        <div className="left-cell">
          <p>
            <img
              className="logo"
              alt=""
              src={require("../images/logo.png")}
            />
            {this.state.topper}
          </p>
        </div> ...

然后在实际页面中我想调用它并更新顶部状态。

  render() {
    return (
      <div className="Team">
        <Articletopper>Title of Article?</Articletopper>
      </div> 
    );
  }
}

我知道你不应该在调用组件时更新状态，只是想知道是否有办法。这样做的目的只是为了在创建新文章时使代码更干净。

提前感谢您的帮助。

编辑：感谢您的回复，如果我不清楚，对不起。我想更新文章的标题，而不是每次都粘贴大量的 html。我认为我需要根据其他人所说的使用道具。比如我想做的：

<ArticleTopper> Article 1 Title </ArticleTopper>
<p> Article1... </p>
<ArticleTopper> Article 2 Title </ArticleTopper>
<p> Article2... </p>

等等……

【问题讨论】：

我想我不明白你想做什么。你能更好地解释一下吗？也许有更多的代码和例子......
会使用道具作品代替：
How do you set the document title in React?的可能重复
如果我正确理解了您的问题，那么您有一个组件，并且在许多地方都被调用。但是您希望组件的某些部分是可定制的。您可以为此使用props
哎呀，我想我一开始误读了页面的标题，而不是标题组件。无论如何，这是另一种方式：use the children prop.

标签： javascript reactjs

【解决方案1】：

所以我只是把整个事情复杂化了。

  render() {
    return (
      <div className="articletopper">
        <div className="left-cell">
          <p>
            <img
              className="dragonball"
              alt=""
              src={require("../images/dragonball.png")}
            />
            {this.props.title}
          </p>
        </div>

只需要this.props.title 我想要文章标题的位置。然后……

import Articletopper from "../articletopper/articletopper";

class Team extends React.Component {
  render() {
    return (
      <div className="Team">
        <Articletopper title={"Hello"}></Articletopper>
      </div>
    );
  }
}

export default Team;

正如我所说，我对此还是很陌生，我想太多了我想做的事！不需要状态，只需要道具！

【讨论】：

【解决方案2】：

你可以在构造的时候通过props来初始化状态。

如果你给组件的title会随时间变化，你可能需要向生命周期方法componentDidUpdate寻求帮助。

【讨论】：