小编Vis*_*oor的帖子

我试图在React JSX中使用switch case有条件地渲染组件.我正在尝试构建从特定json结构读取并呈现数据的内容.由于可以有许多不同的组件和数据,我试图动态呈现它.请参阅下面的代码,我没有收到任何错误,但组件没有得到渲染.在我的HTML中,我只能看到.这意味着循环不起作用.我尝试在vanilla JS中使用相同的循环,它的工作原理.

var myPackage = [{
    sectionInfo:[{
        elementType: 1,
        text: "This is text from element type 1"
    }]
},
{
    sectionInfo:[{
        elementType: 2,
        text: "This is text from element type 2"
    }]
}];
var App = React.createClass({

    render: function(){
        var elements = [];
        elements = myPackage.map(function(myObj){
            myObj.sectionInfo.map(function(myObj1){
                switch(myObj1.elementType){
                    case 1: return(
                                <Component1 text = {myObj1.text}/>
                            );
                            break;
                    case 2: return(
                                <Component2 text = {myObj1.text}/>
                            )
                            break;      
                }
            })
        });
        return(
            <div className="App">
                {elements}
            </div>
        )
    }
});
var …

当我们使用时ReactDOM.render(<Component/>,document.getElementById("container"));,组件被渲染到提到的元素.如果这里的div已经有一些现有内容怎么办？可以React将渲染的组件附加到它吗？例如:

HTML:

<div id = "container">Hello, React!</div>

JSX:

var Component = React.createClass({
            render: function(){
                return(
                    <p>Hello to you too!</p>
                )
            }
        })
        ReactDOM.render(<Component/>, document.getElementById("container"));

我正在尝试渲染一个组件，其样式和位置是根据某些情况确定的。为了做到这一点，我将其渲染在一个占据整个主体的容器中，并且组件在其中移动。除了这样做之外，如何确保容器的样式与组件的样式相同？我不希望容器占据整个主体，我只希望它占据组件。

代码：

var componentStyle;
//cases
componentStyle = {}; //some css properties
var MyComponent = React.createClass({
render: function(){
return(
<div style = {componentStyle}>Some content</div>
)
}
})
    var container = document.createElement("div");
container.id = "container";
document.body.appendChild(container);
ReactDOM.render(<MyComponent/>,container);

容器的CSS：

#container {
    position: absolute;
    top:0;left: 0;
    font-family: Arial, Helvetica, sans;
    background: transparent;
    height: 100%;
    width: 100%;
    z-index:9999999;
}

我正在尝试创建一个组件，当屏幕方向（纵向/横向）发生变化时，其内容也会发生变化。这就是我正在做的：

 var Greeting = React.createClass({
    getInitialState: function() {
        return {orientation: true}
    },
    handleChange: function() {
        if ('onorientationchange' in window) {
            window.addEventListener("orientationchange", function() {
                this.setState({
                    orientation: !this.state.orientation
                })
                console.log("onorientationchange");
            }, false);
        } else if ('onresize' in window) {
            window.addEventListener("resize", function() {
                this.setState({
                    orientation: !this.state.orientation
                })
                console.log("resize");
            }, false);
        }
    },
    render: function() {
        var message = this.state.orientation ? "Hello" : "Good bye"
        return <p>{message}</p>;
    }
});

ReactDOM.render(
    <Greeting/>, document.getElementById('container'));

如何确保在触发方向更改事件时状态发生变化。

我有一个用例，我正在下载一些 json 文件并解析它们。根据下载的文件，程序需要将数据填充到不同的表中。将数据加载到表中后，必须发送电子邮件通知。

例如，如果程序需要填充表 a 和 b（从 table_list 获取），那么工作流程应类似于 download >> parse >> [load_table_a, load_table_b] >> send_email

如果表 a、b、c、d 是从 table_list 获取的，那么工作流程应类似于 download >> parse >> [load_table_a, load_table_b, load_table_c, load_table_d] >> send_email

这就是我正在尝试的。有人可以帮忙吗？

from airflow import DAG
from airflow.operators.python_operator import PythonOperator
from airflow.operators.email_operator import EmailOperator

from datetime import datetime

from download_script import download
from parse_script import parse
from load_2_sf_script import get_table_list, insert_into_sf
from airflow.utils.email import send_email_smtp


default_args = {
    'start_date': datetime(2021, 5, 18)
}


with DAG(
    'Test DAG',
    default_args = …

当在React中使用this.setState()时状态实际发生变化时,我感到很困惑.这是我的JSX:

var Hello = React.createClass({
  getInitialState: function () {
    return {
      iterator: 0
    }
  },
  handleClick: function () {
    console.log(this.state.iterator);
    this.setState({
      iterator: this.state.iterator + 1
    })
    console.log(this.state.iterator)
  },
  render: function () {
    return <button onClick={this.handleClick}>{this.state.iterator}</button>;
  }
});

ReactDOM.render(
  <Hello name="World"/>,
  document.getElementById('container')
);

如您所见,我在调用this.setState()之前和之后记录迭代器的状态.但无论如何,它都记录了相同的数字.在我第一次单击按钮之后,我希望分别记录0和1,但它们都记录0和0.而在第二次点击时,它们记录1和1.那么状态实际上是什么时候发生变化以及究竟发生了什么这里？

我是 EaselJS 的新手。我将文本的 maxWidth 属性设置为 200px，达到最大宽度后，文本开始压缩。如何确保文本达到最大宽度后换行？

var text = new createjs.Text();
text.set({
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elementum elit vitae nisl elementum, et aliquet quam malesuada. Pellentesque porta consequat pellentesque. Quisque vel molestie quam. Aliquam in vehicula magna. Integer ac congue sem, et tempor libero. Etiam pharetra, quam et posuere porta, lectus odio iaculis nibh, eget porttitor magna elit id felis. Mauris luctus lobortis tincidunt."
x: 0,
y: 0,
font: "16px Arial black",
maxWidth: 200 …