Question

我在React.js中有这样的代码：

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      clicks: 0
    };
  }

  render() {
    return (<div>
       <button onClick={this.increment.bind(this)}>Click it</button>


      <Btn name={this.state.clicks}/>
      <Btn name="sssssss"/>
      <Btn name="aaaaaaa"/>

    </div>)
  }

    increment() {
    this.setState({
      clicks: this.state.clicks + 1
    })
  }


}

class Btn extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      prop: "xyz"
    };
  }


  render () {
  return ( <div className="button">{props.name}</div>)
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

这里发生了什么？我有两个组件--App和Btn，它是Parent和Child。在App中还有一个带有单词的按钮＆＃34;单击它＆＃34;。当我点击它状态＆＃34;点击＆＃34;属性递增。 App有3个Btn组件，用名为name的prop调用。我想要实现的是： - 获取道具名称并在子组件中使用它 - 也可以动态改变

我做错了什么？

REACT.js - 将prop状态值作为prop组件发送给子组件

0 个答案: