从另一个组件初始化一个组件的状态并获取状态值

Question

我是异步机制的 reactnative/js 世界的新手，我阅读了很多类似的示例，但我不清楚。所以请在这里找到我的问题。

我正在尝试创建一个组件（在示例中称为“锚”）并从另一个组件更新其状态（名称参数）。 我想从父组件中获取“锚”组件的属性 state.name 值。 我的问题如下： - 锚组件的创建似乎没有处理组件创建的 props.name 参数 - 不知道如何从父组件（示例中的App）访问组件状态参数值（his.state.name）

https://jsfiddle.net/n5u2wwjg/203556/

锚组件

class Anchor extends React.Component{
    constructor(props) {
        super(props)
           this.state = {
              name : props.name
           }
        this.name = this.state.name;
    }

 /*
    getName(){
       return this.state.name;
    }
 */  
}  

以及 App 组件：

class App extends React.Component <any> {
  constructor(props) {
    super(props)
    this.state = {
       anchor : undefined,
       items: [
           { text: "Learn JavaScript", done: false },
           { text: "Learn React", done: false },
           { text: "Play around in JSFiddle", done: true },
           { text: "Build something awesome", done: true }
       ]
     }
 }

addAnchor(){
    var anchor = new Anchor('hello');
    this.setState({
        anchor : anchor,
    });
    console.debug('get my anchor name: '+ this.state.anchor.name);
}

render() {
    return (
        <div>
            <h2>Todos:</h2>
                {this.state.anchor.name}
            <ol>
                {this.state.items.map(item => (
                <li key={item.id}>
                <label>
                    <input type="checkbox" disabled readOnly checked={item.done} /> 
                    <span className={item.done ? "done" : ""}>{item.text}</span>
                </label>
                </li>
                ))}
            </ol>
        </div>
    )}
}

Answer 1

如果您想像一些简单的 POJO 一样操作组件。

那么试试这个：

class Anchor extends React.Component {
  render() {
    return (
      <div>
        <h3>Name: {this.props.name}</h3>
      </div>
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'Hello',
      items: [
        { text: 'Learn JavaScript', done: false },
        { text: 'Learn React', done: false },
        { text: 'Play around in JSFiddle', done: true },
        { text: 'Build something awesome', done: true }
      ]
    };
  }
  addAnchor(){
     const anchor = React.createElement('Anchor', { name: this.state.name }, '');
     console.log(anchor.props.name);
  }

  render() {
    return (
      <div>
        <h2>Todos:</h2>
        <Anchor name={this.state.name} />
        <ol>
          {this.state.items.map(item => (
            <li key={item.id}>
              <label>
                <input type="checkbox" disabled readOnly checked={item.done} />
                <span className={item.done ? 'done' : ''}>{item.text}</span>
              </label>
            </li>
          ))}
        </ol>
      </div>
    );
  }
}
ReactDOM.render(<App />, document.querySelector("#app"))

我们必须以 React 的方式实例化一个 React 组件：

React.createElement('Anchor', { name: this.state.name }, ''); // <~~ like this

//var anchor = new Anchor('hello'); <~~ not like this

更多详情，您可以在这里阅读：React Without JSX

希望对您有所帮助！