Question

我无法将文本区域中的Input转到Marked解释器（获取TypeError：无法读取null的属性“值”）。关于如何解决它的任何想法？

文本区域输入：

import React, { Component } from 'react';
import './App.css';
import marked from "marked";
import MarkdownExample from "./previewer";

class Editor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'Some markdown text.'
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

createMarkup() 
{
return {__html: marked(this.state.value)};
}

  render() {
    return (
           <div>
          <textarea value={this.state.value} onChange={this.handleChange}/>
          <MarkdownExample />
          </div>
    );
  }
}

预览器：

import React, { Component } from 'react';
import './App.css';
import marked from "marked";

class MarkdownExample extends React.Component {
  getMarkdownText(props) {
    var rawMarkup = marked(this.state.value, {sanitize: true});
    return { __html: rawMarkup };
  }
  render() {
    return <div dangerouslySetInnerHTML={this.state.value.getMarkdownText()} />
  }
}

export default MarkdownExample;

Answer 1

您不能直接从父级访问状态，但可以将道具传递给孩子

 import React, { Component } from 'react';
import './App.css';
import marked from "marked";
import MarkdownExample from "./previewer";

class Editor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'Some markdown text.'
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

createMarkup() 
{
return {__html: marked(this.state.value)};
}

  render() {
    return (
           <div>
          <textarea value={this.state.value} onChange={this.handleChange}/>
          <MarkdownExample parentValue={this.state.value}/>
          </div>
    );
  }
}

预览者：

import React, { Component } from 'react';
import './App.css';
import marked from "marked";

class MarkdownExample extends React.Component {
  getMarkdownText() {
    var rawMarkup = marked(this.props.parentValue, {sanitize: true});
    return { __html: rawMarkup };
  }
  render() {
    return <div dangerouslySetInnerHTML={this.getMarkdownText()} />
  }
}

export default MarkdownExample;

构建一个React Markdown预览器

1 个答案: