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

我是个新手，已经有点卡住了。我为一篇文章Toper制作了一个组件，在整个网站上重复了很多次。它有一个徽标、一个标题和几个共享按钮，只位于文章上方，上面有文章的名称

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

  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> ...

构造函数（道具）{
超级（道具）；
此.state={
顶部：[]
};
}
render（）{
返回(

{this.state.topper}

...

然后在实际页面中，我想调用它并更新topper状态

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

render（）{
返回(
文章的标题？
);
}
}

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

提前感谢您的帮助

编辑：谢谢你的回复，如果我不清楚的话，很抱歉。我想更新文章的标题，而不是每次粘贴大量html。我想我需要根据其他人所说的使用道具。例如，我想做：

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

第1条标题
第1条

第2条标题
第2条

---

等等…

您可以在构造时通过道具初始化状态

---

如果您给组件的

标题

随时间而变化，您可能需要向lifecycle method

componentDidUpdate

寻求帮助。

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

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

---

正如我所说，这还是一个非常新的概念，我想做的太多了！不需要状态，只需要道具！

我想我不明白你想做什么。你能更好地解释一下吗？也许有更多的代码和示例…使用道具会起作用吗：如果我正确理解你的问题，你有一个组件和这在很多地方都被调用。但是您希望组件的某些部分是可自定义的。为此，您可以使用

props

。首先，我想我误读了页面的标题，而不是标题组件。无论如何，还有一种方法：。

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

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

export default Team;