Question

我目前正在学习React，我有一个简单的组件，可以呈现简单的纯文本。我创建了一个小组件，可以从道具中获取简单的纯文本，但我感到很惊讶。当我在变量上分配一个简单的静态值时，它可以正常工作，但是当我尝试从道具中获取该值时，它将不起作用。

这是示例代码段。

let TextEditor = React.createClass({
  getInitialState: function () {
    var content = "test 2";
    var content = this.props.plainText
    return {
      content: content
    };
  },

  render() {
    return (
      <div>
        <Editor
          value={this.state.content}
        />
      </div>
    )
  }
})

高级谢谢您的提示

Answer 1

getInitialState现在似乎有点过时了。我建议至少研究一下ES6的工作方式。最好不要在构造函数中立即设置prop的状态，而是可以在组件安装后更新状态。还有其他将道具放入组件的方法，因此可以更详细地查看react文档。

作为ES6的基本示例。...

class MyComp extends React.Component {
    constructor(props) {
        super(props);
        this.state = { content: '' };
    }

    componentDidMount = () => {
        const { plainText } = this.props;
        this.setState({ content: plainText });
    }

    render() {
        const { content } = this.state;
        return (
            <div>
                <Editor value={content} />
            </div>
        );
    }
}

Answer 2

您可以使用以下代码获得预期的结果：

class MyComp extends React.Component {
    constructor(props) {
        super(props);
        this.state = { content: this.props.plainText  };
    }
    render() {
        const { content } = this.state;
        return (
            <div>
                <Editor value={content} />
            </div>
        );
    }
}

反应组件道具的价值问题

2 个答案: