Question

我对使用异步机制的reactnative / js领域是陌生的，并且我阅读了很多类似的示例，但我不清楚。因此，请在这里找到我的问题。

我正在尝试创建一个组件（在示例“ anchor”中称为）并从另一个组件更新其状态（名称参数）。我想从父组件获取'anchor'组件的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

希望这会有所帮助！

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

1 个答案: