Question

我有一个react组件从另一个父组件获取prop。我检查了反应开发工具，道具肯定会通过。

这是我的代码：

var Post = React.createClass({
  getInitialState: function () {
    return { content: this.props.content };
  },
  rawMarkup: function() {
    var rawMarkup = marked(this.state.content, {sanitize: true});
    return { __html: rawMarkup };
  },
  render: function() {
    return (
       <div>
          {this.props.content }
          <div dangerouslySetInnerHTML={ this.rawMarkup() } />
       </div>
    );
  }
});

这会导致标记错误：Uncaught TypeError: Cannot read property 'replace' of undefined标记为.js。但是，当我将setInitialState设置为return { content: "Blah" };时，它可以正常工作。所以看起来支柱没有设置在那里？

但是当我在渲染中执行{this.props.content}时，它可以正常工作吗？

Answer 1

您不必使用状态同步道具，使用状态为anti-pattern的道具更多。每当道具或状态发生变化时，都会调用render()

然而，如果你说得清楚的话，它不是反模式同步不是这里的目标

   var Post = React.createClass({
      rawMarkup: function() {
        var rawMarkup = marked(this.props.content, {sanitize: true});
        return { __html: rawMarkup };
      },

      render: function() {
        return (
           <div>
              {this.props.content }
              <div dangerouslySetInnerHTML={ this.rawMarkup() } />
           </div>
        );
      }
    });

Answer 2

只是你的州已经过时了。尝试添加：

getInitialState: function () {
  return { content: this.props.content || '' };
},
componentWillReceiveProps: function(nextProps) {
  if (this.props.content !== nextProps.content) {
    this.setState({
      content: nextProps.content || '',
    });
  }
},

详细了解组件的生命周期here。

编辑：这将解决您的问题，但通常以这种方式使用状态是一种反模式（除非内容是输入或其他内容，您在问题中没有提到过）。你应该做的是创建一个只接受content道具并渲染marked输出的新组件。我建议你在这里使用stateless functional component。

var MarkedContent = (props) => {
  return <div dangerouslySetInnerHTML={{__html: marked(props.content || '', {sanitize: true})}}></div>
}

将此组件放入Post组件中，如下所示：

var Post = React.createClass({
  render: function() {
    return (
       <div>
          <MarkedContent content={this.props.content} />
       </div>
    );
  }
});

感谢 David Walsh ！

Answer 3

您的Post所有人都有content吗？

我猜你从某个地方（数据库）获取帖子列表，其中一些content是undefined，因此：

未捕获的TypeError：无法读取未定义
的属性'replace'

可能this.props.content有undefined作为值。然后，this.state.content被初始化为undefined，当您致电marked(this.state.content, {sanitize: true})时，您会收到此错误，因为您将undefined传递给marked。

道具没有设置状态

3 个答案: