Javascript 设置子对象的内联样式

我正在尝试为React中的儿童设置一些内联样式。我有一个实际可行的方法，有点：

var App = React.createClass({
  render: function() {
    var children = React.Children.map(this.props.children, function(child, i) {
      child.props.style.width = '100px'
    })
    return (
      <div>{children}</div>
    )
  }
})

var-App=React.createClass({
render:function（）{
var children=React.children.map（this.props.children，函数（child，i）{
child.props.style.width='100px'
})
返回(
{儿童}
)
}
})

但是，如果在状态更改时尝试更改样式，样式将保持不变。你可以很容易地看到这一点时，尝试这样的东西：（小提琴：）

var-World=React.createClass({
getInitialState:函数（）{
返回{宽度：0}
},
componentDidMount:function（）{
this.setState（{width:100}）
},
componentDidUpdate:函数（）{
log（this.getDOMNode（）.innerHTML）；
},
render:function（）{
变宽
var children=React.children.map（this.props.children，函数（child，i）{
宽度=i*this.state.width
console.log（'设置宽度：'+宽度）；
child.props.style={width:（i*this.state.width）+'px'}
返回儿童
}，本页）
返回{children}
}
})
var Hello=React.createClass({
render:function（）{
返回(
1.
1.
)
}
})
React.renderComponent（，document.body）；

它将记录宽度已更改，但

props.style

未按预期工作。并且使用

child.setProps（）

将抛出“不变冲突：replaceProps（…）：只能更新已装入的组件”。是否有另一种将内联样式更改为子样式的“反应方式”？

在“只能更新已安装的组件”检查之后，还有另一种：

该逻辑与更新DOM节点的角度不同。当需要更改DOM节点时，通常的方法是获取对该DOM节点的引用，然后设置其属性。使用React，而不是更新特定节点，渲染方法只返回具有正确属性集的新React组件，然后后端代码计算出要更新的DOM节点

当在普通DOM代码中错误地显示某些内容时，很难知道问题出在哪里，因为任何代码都可以更新DOM节点

当代码被安排到React中这样的渲染方法中时，渲染方法总是采用

this.props

和

this.state

并返回完整、完全渲染的组件。然后，如果某些内容没有正确渲染，则始终可以查看

render

方法来查找问题，因为这是渲染发生的唯一地方。（无论是第一次渲染还是第二次渲染，这都有效，因此无需区分第一次渲染组件和更新组件。）

因此，解决您描述的问题的方法是将有关渲染div的逻辑移动到创建div的渲染方法中，而不是移动到其他组件的渲染方法中。大概是这样的：

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

var Hello = React.createClass({
    getInitialState: function() {
        return { width: 0 };
    },
    componentDidMount: function() {
        this.setState({ width: 100 });
    },
    render: function() {
        var children = ["a", "b", "c"].map(function(content, i) {
            return (
                <div style={{ width: i * this.state.width }}>
                    {content}
                </div>
            );
        }, this);

        return (
            <World>
                {children}
            </World>
        )
    }
});

React.renderComponent(<Hello />, document.body);

var-World=React.createClass({
render:function（）{
返回{this.props.children}；
}
});
var Hello=React.createClass({
getInitialState:函数（）{
返回{宽度：0}；
},
componentDidMount:function（）{
this.setState（{width:100}）；
},
render:function（）{
var children=[“a”、“b”、“c”].map（函数（content，i）{
返回(
{content}
);
}，这个）；
返回(
{儿童}
)
}
});
React.renderComponent（，document.body）；

在“只能更新已安装的组件”检查之后，还有一个：

该逻辑与更新DOM节点的角度不同。当需要更改DOM节点时，通常的方法是获取对该DOM节点的引用，然后设置其属性。使用React，而不是更新特定节点，渲染方法只返回具有正确属性集的新React组件，然后后端代码计算出要更新的DOM节点

当在普通DOM代码中错误地显示某些内容时，很难知道问题出在哪里，因为任何代码都可以更新DOM节点

当代码被安排到React中这样的渲染方法中时，渲染方法总是采用

this.props

和

this.state

并返回完整、完全渲染的组件。然后，如果某些内容没有正确渲染，则始终可以查看

render

方法来查找问题，因为这是渲染发生的唯一地方。（无论是第一次渲染还是第二次渲染，这都有效，因此无需区分第一次渲染组件和更新组件。）

因此，解决您描述的问题的方法是将有关渲染div的逻辑移动到创建div的渲染方法中，而不是移动到其他组件的渲染方法中。大概是这样的：

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

var Hello = React.createClass({
    getInitialState: function() {
        return { width: 0 };
    },
    componentDidMount: function() {
        this.setState({ width: 100 });
    },
    render: function() {
        var children = ["a", "b", "c"].map(function(content, i) {
            return (
                <div style={{ width: i * this.state.width }}>
                    {content}
                </div>
            );
        }, this);

        return (
            <World>
                {children}
            </World>
        )
    }
});

React.renderComponent(<Hello />, document.body);

var-World=React.createClass({
render:function（）{
返回{this.props.children}；
}
});
var Hello=React.createClass({
getInitialState:函数（）{
返回{宽度：0}；
},
componentDidMount:function（）{
this.setState（{width:100}）；
},
render:function（）{
var children=[“a”、“b”、“c”].map（函数（content，i）{
返回(
{content}
);
}，这个）；
返回(
{儿童}
)
}
});
React.renderComponent（，document.body）；

---

您直接修改每个子级的props对象，这绕过了React的部分更新机制。我们很快就会让这一切变得不可能

在这个c

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

var Hello = React.createClass({
    getInitialState: function() {
        return { width: 0 };
    },
    componentDidMount: function() {
        this.setState({ width: 100 });
    },
    render: function() {
        var children = ["a", "b", "c"].map(function(content, i) {
            return (
                <div style={{ width: i * this.state.width }}>
                    {content}
                </div>
            );
        }, this);

        return (
            <World>
                {children}
            </World>
        )
    }
});

React.renderComponent(<Hello />, document.body);

var children = React.Children.map(this.props.children, function(child, i) {
    width = i*this.state.width;
    console.log('Setting width: '+width);
    return React.addons.cloneWithProps(child, {style: {width: width + 'px'}})
}, this)
return <div>{children}</div>