Question

我正在做一个破折号项目。我刚刚在破折号中学习了Create your own components。我创建了一个简单的组件- textarea 。跟随的是组件的代码-

my_dash_component / mydashcomponent.react.js

import React, {Component} from 'react';
import PropTypes from 'prop-types';
export default class mydashcomponent extends Component {

render(){
    const {id,setProps,value} = this.props;
    return(
    <div id={id}>
       <textarea cols="150" rows="45" value={value} onChange={e => {
                     if (setProps) {
                         setProps({
                            value: e.target.value
                        });
                    } else {
                        this.setState({
                            value: e.target.value
                        })
                    }
                }} />
    </div>
    );
  }
}

mydashcomponent.defaultProps = {};

mydashcomponent.propTypes = {
   /**
   * The ID used to identify this component in Dash callbacks
   */
   id: PropTypes.string,

   /**
   * A label that will be printed when this component is rendered.
   */
   //label: PropTypes.string.isRequired,

   /**
   * The value displayed in the input
   */
   value: PropTypes.string,

   /**
   * Dash-assigned callback that should be called whenever any of the
   * properties change
   */
   setProps: PropTypes.func
 };

我正在using.py中使用此组件

usage.py-

import my_dash_component
import dash
from dash.dependencies import Input, Output
import dash_html_components as html
import dash_core_components as dcc

app = dash.Dash(__name__)

app.scripts.config.serve_locally = True
app.css.config.serve_locally = True

app.layout = html.Div([

    my_dash_component.mydashcomponent(
      id='input',
      value='this is a text area',
   ),
html.Div(id='output')
])

我的问题是，当我将值（道具）作为纯文本传递时，它工作正常。但是，当我将值作为html标记（即value=<h2>This is a text area</h1>）传递时，它给出了无效的语法错误。如何将值作为html标签传递？

谢谢。问候。

Answer 1

你做不到

value=<h2>This is a text area</h1>

在 usage.py 中，这是无效的语法。

同样在你的 proptypes 中，你指定的 value 需要是一个字符串，并且你没有传入一个字符串，所以即使它是有效的语法它也不会工作。

/**
* The value displayed in the input
*/
value: PropTypes.string

另一个问题是，据我所知，textarea 中只能包含纯文本。

您可以做的是创建一个 div，它在您的自定义组件中将 contentEditable 属性设置为 true，并将 children 传递给此 {{1} }：

div

import React, {Component} from 'react'; import PropTypes from 'prop-types'; export default class mydashcomponent extends Component { render() { const {id, setProps, children} = this.props; return ( <div id={id}> <div contentEditable={true} suppressContentEditableWarning={true} cols="150" rows="45" > {children} </div> </div> ); } } mydashcomponent.defaultProps = {}; mydashcomponent.propTypes = { id: PropTypes.string, children: PropTypes.node, setProps: PropTypes.func, }; 看起来像这样：

usage.py

如果您想跟踪 Dash 应用程序中 div 的内容如何变化，您可以添加一个事件侦听器并执行以下操作：

import mydashcomponent
import dash
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = mydashcomponent.mydashcomponent(html.H2("This is a text area"))


if __name__ == "__main__":
    app.run_server(debug=True)

import React, {Component, createRef} from 'react';
import PropTypes from 'prop-types';

export default class mydashcomponent extends Component {
    constructor(props) {
        super(props);
        this.editable = createRef();
    }
    componentDidMount() {
        this.editable.current.addEventListener(
            'input',
            (e) => {
                console.log(e.target);
                // prints something like <div contenteditable="true" cols="150" rows="45"><h2>This is a textarea</h2></div>
                // Do something with it like calling setProps with the text inside the h2 for the value property...
                this.props.setProps({value: e.target.children[0].textContent});
            },
            false
        );
    }
    render() {
        const {id, setProps, value} = this.props;
        return (
            <div id={id}>
                <div
                    contentEditable={true}
                    suppressContentEditableWarning={true}
                    ref={this.editable}
                    cols="150"
                    rows="45"
                >
                    <h2>{value}</h2>
                </div>
            </div>
        );
    }
}

mydashcomponent.defaultProps = {};

mydashcomponent.propTypes = {
    id: PropTypes.string,
    children: PropTypes.node,
    setProps: PropTypes.func,
    value: PropTypes.string,
};

如何将道具作为HTML标记传递以在仪表板中以图形方式反应元素

1 个答案: