我有一个场景,我使用React.js使用以下代码创建div:
React.createElement('div', {}, "div content")
如果这个div需要将className属性设置为“ClassA”或“ClassB”,或者它根本不应该具有className,那么一些额外的javascript处理将允许我演绎。
有没有办法在javascript中访问从React DOM创建的div并添加className属性?
注意:我无法实现这是JSX所以我使用了createElement方法。
编辑:值得一提的是,我可能需要有条件地添加className以外的属性。例如,我可能需要根据条件逻辑向锚标签添加“alt”属性。 先感谢您。
答案 0 :(得分:4)
使用JSX spread。使用props构建和对象,根据需要修改它并将其传递给组件,如下所示:
const props = {
name: 'SomeName'
}
if (true) {
props.otherName = 'otherName';
}
return (
<SomeComponent {...props}/>
);
看到...
语法?那个传播操作员完成这项工作 - 所有道具最终都会成为你组件的独立属性。
答案 1 :(得分:0)
因为你最初尝试在JSX中使用你的逻辑。我有一个使用状态
的jsx解决方案
class App extends React.Component {
constructor() {
super();
this.state = {
classValue: ''
}
}
handleClick = () => {
if(this.state.classValue == '') {
this.setState({classValue : 'green'});
}
else if(this.state.classValue == 'green') {
this.setState({classValue : 'blue'});
}
else {
this.setState({classValue : 'green'});
}
}
render() {
return (
<div>
<div className={this.state.classValue}>Hello World</div>
<button onClick={this.handleClick()}>Toggle</button>
</div>
)}
}
ReactDOM.render(<App/>, document.getElementById('app'));
&#13;
.green {
background-color: green;
}
.blue {
background-color: blue;
}
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>
<div id="app"></div>
&#13;
该示例显示了如何使用状态更改className,您可以设置您想要更改的任何属性。
答案 2 :(得分:0)
您可以使用ES6语法来实现所需的功能
const yourComponentProps = {
[ifThisIsTrue ? 'useThisName' : 'useAnotherName']: 'yourDesiredValue',
};
return <YourComponent {...yourComponentProps} />
答案 3 :(得分:-1)
这是React中非常正常的情况,几乎不需要特殊处理。
注意:最好以声明方式向下移动组件树中的props,但如果这不是一个选项,则可以在componentDidMount
中绑定侦听器函数并在componentWillUnmount
中取消绑定它们,如以下示例。只要它们调用setState,就会触发组件的渲染函数。
const { Component, cloneElement } = React
class Container extends Component {
constructor(props) {
super(props)
this.state = { classNames: [ 'foo' ] }
this.appendClassName = () => {
const { classNames } = this.state
this.setState({ classNames: [ ...classNames, `foo_${classNames.length}` ] })
}
}
componentDidMount() {
document.querySelector('button').addEventListener('click', this.appendClassName)
}
componentWillUnmount() {
document.querySelector('button').removeEventListener('click', this.appendClassName)
}
render() {
const { children } = this.props
const { classNames } = this.state
return <div className={classNames.join(' ')}>{children}</div>
}
}
ReactDOM.render(<Container>I am content</Container>, document.getElementById('root'))
.foo {
font-family: monospace;
border: 1px solid rgb(100, 50, 50);
font-size: 1rem;
border-style: solid;
border-width: 1px;
width: 50vw;
height: 50vh;
margin: auto;
display: flex;
align-self: center;
justify-content: center;
align-items: center;
}
.foo.foo_1 {
font-size: 1.5rem;
background-color: rgb(200, 100, 200);
}
.foo.foo_2 {
font-size: 2rem;
border-radius: 3px 7px;
background-color: rgb(180, 120, 200);
}
.foo.foo_3 {
border-style: dashed;
background-color: rgb(175, 130, 180);
}
.foo.foo_4 {
border-width: 2px;
background-color: rgb(160, 165, 170);
}
.foo.foo_5 {
border-width: 1rem;
background-color: rgb(150, 200, 150);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<button>Click me</button>
<div id="root"></div>
P.S。 - 避免使用componentWillMount
,它可能导致生命周期中的错误,并且有人认为它可能会在未来版本的React中被删除。始终在componentDidMount
内制作异步副作用负载请求,并在componentWillUnmount
中清除它们。即使你没有任何渲染,你最好渲染一个占位符组件,直到你的数据到达(快速加载的最佳选择),或者根本没有。