React 组件 props 值问题

Posted 2023-02-23

【中文标题】React 组件 props 值问题

【英文标题】：React component props value issue

【发布时间】：2020-03-27 05:00:42

【问题描述】：

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

这里是示例 sn-p 代码。

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

提前感谢您的提示

【问题讨论】：

你在哪里使用getInitialState函数？你能提供整个代码吗？

是的，我肯定会更改上面的代码并提供整个代码。

【参考方案1】：

您可以使用以下代码来达到预期的效果：

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>
        );
    

【讨论】：

我在我的项目中使用 ` "react": "15.3.2",` npm 包。此版本可能不支持构造函数。

如果您目前正在“学习反应”，我强烈建议您升级到 16.9.0。尝试在一个很旧的版本上学习一些东西是没有意义的。有很多东西已经/正在被贬值。

【参考方案2】：

getInitialState 现在似乎有点过时了。我建议至少研究一下 ES6 的做事方式。最好不要在构造函数中立即将 props 设置为 state，您可以在组件挂载时更新 state。还有其他方法可以将你的 props 放入你的组件中，因此它可以更详细地查看 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>
        );
    

【讨论】：

我在我的项目中使用 ` "react": "15.3.2",` npm 包。